<template>
	<view class="content" :style="{ height: webStyle.height }">
		<template v-if="1">
			<view class="bgc" v-show="[1, 2, '1', '2'].includes(footerBarListAc)"></view>
			<image class="bgi" v-show="[1, 2, '1', '2'].includes(footerBarListAc)" :src="imgPath + 'login/Background.png'" mode=""></image>

			<scroll-view class="page1" scroll-y="true" @scrolltolower="waterfallsFlowRefScroll" v-if="footerBarListAc == 1">
				<!-- <view class="banner-box">
					<view class="pic-box">
						<image class="pic" :src="imgPath + 'index/Background_2.jpg'" mode="widthFix"></image>
					</view>
				</view> -->
				<swiper class="banner-box" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
					<template v-if="companyName == '言影'">
						<swiper-item class="pic-box">
							<image class="pic" :src="imgPath + 'index/Background_2_old.jpg'" mode="widthFix"></image>
						</swiper-item>
						<swiper-item class="pic-box">
							<image class="pic" :src="imgPath + 'index/Background_1.jpg'" mode="widthFix"></image>
						</swiper-item>
					</template>
					<template v-if="companyName != '言影'">
						<swiper-item class="pic-box">
							<image class="pic" :src="imgPath + 'index/Background_2.jpg'" mode="widthFix"></image>
						</swiper-item>
					</template>
				</swiper>
				<view class="top-btns">
					<view class="t">
						<view class="left" @tap="openSelectChicunShow">
							<image class="icon" :src="imgPath + 'index/top1.svg'" mode="widthFix"></image>
							<view class="text" style="font-size: 4.6vw">开始创作</view>
						</view>
						<view class="right">
							<view class="sub sub1" @tap="toMakeAvatar">
								<image class="icon" :src="imgPath + 'index/shuzhiren.png'" mode="widthFix"></image>
								<view class="text" style="font-size: 4.6vw">克隆分身</view>
							</view>
						</view>
					</view>
					<view class="b">
						<view class="list">
							<view class="item" :style="{ background: item.bgc }" v-for="(item, index) in topList" :key="index" @tap="topItemTapFN(item, index)">
								<image class="icon" :src="imgPath + 'index/' + item.icon" mode="widthFix"></image>
								<view class="text">{{ item.text }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="hot" v-if="!!hottopList.length && !['默客', '极智拍'].includes(companyName)">
					<view class="t">
						<view class="t-l">热门文案</view>
						<view class="t-r" @tap="toHotspotPage('/pages/hotspot/hotspot')">
							<view class="text">更多</view>
							<view class="icon"></view>
						</view>
					</view>
					<view class="cont">
						<view class="list">
							<view class="item" v-for="(item, index) in hottopList" :key="index" @tap="toCreateCont(item, index)">
								<view class="dot" :style="{ background: item.dot }"></view>
								<view class="text">{{ item.text }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content-tabbar" v-if="0">
					<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index">
						<view class="icon-box">
							<image class="icon" :src="imgPath + 'index/' + item.icon" mode=""></image>
						</view>
						<view class="text">
							{{ item.text }}
						</view>
					</view>
				</view>
				<view class="content-main">
					<view class="tabbar-box" @tap.stop="">
						<view class="tabbar">
							<view @tap="changeClassificationInd(item, index)" v-for="(item, index) in classification" :class="['tabbar-item', '_page1', classificationInd == index ? 'ac' : '']" :key="index">
								<view class="text">
									{{ item.text }}
								</view>
								<view class="tabbar-item-hot" v-if="item.hot">
									<image class="hotPic" :src="imgPath + 'index/hot.png'" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="filter">
							<!-- <uni-data-select v-model="chicunAc" :localdata="chicunRange" @change="changechicun"></uni-data-select> -->
						</view>
					</view>
					<view class="content-list">
						<!-- <button @tap="testaaa">adasd</button> -->
						<custom-waterfalls-flow v-if="waterfallsFlowRefShow" ref="waterfallsFlowRef" :value="matData" :column="matDataColumn" :columnSpace="1.5" :seat="2">
							<!-- #ifdef MP-WEIXIN -->
							<view class="content-item" v-for="(item, index) in matData" :key="item.id" slot="slot{{index}}">
								<view class="show" @click="changeBrowseVideoAc(item, index)">
									<image class="pic" :src="item.matterValue" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="text">{{ item.matterName }}</view>
								</view>
							</view>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<template v-slot:default="{ item, index }">
								<view class="content-item">
									<view class="show" @click="changeBrowseVideoAc(item, index)">
										<image class="pic" :src="item.matterValue" mode="widthFix"></image>
									</view>
									<view class="info">
										<view class="text">{{ item.matterName }}</view>
									</view>
								</view>
							</template>
							<!-- #endif -->
						</custom-waterfalls-flow>
					</view>
					<view class="kong-page"></view>
				</view>
			</scroll-view>

			<view class="page2" v-if="0">
				<view class="page2-tabbar" :style="{ 'padding-top': inf0Pt + 'vh' }">
					<view class="list">
						<!-- #ifdef MP-WEIXIN -->
						<view
							:class="['ac']"
							:style="{
								left: tabbarListIn2CurItem.style.left,
								transform: tabbarListIn2CurItem.style.transform,
								width: tabbarListIn2CurItem.style.width
							}"
						></view>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view :class="['ac']" :style="tabbarListIn2CurItem.style"></view>
						<!-- #endif -->
						<view class="item" v-for="(item, index) in tabbarListIn2" :key="index" @tap="tabbarListIn2CurItem = item">
							{{ item.text }}
						</view>
					</view>
				</view>
				<view class="page2-pic">
					<image class="pic" :src="imgPath + tabbarListIn2CurItem.pic" mode="widthFix" :style="{ marginTop: tabbarListIn2CurItem.picStyle.marginTop, width: tabbarListIn2CurItem.picStyle.width }"></image>
					<view class="tips">{{ tabbarListIn2CurItem.tips }}</view>
				</view>
				<view class="page2-text" @tap="toMakeAvatar" @taps="toContactUs('定制数字人')">{{ tabbarListIn2CurItem.cont }}</view>
			</view>

			<view class="page3" :style="{ display: footerBarListAc == 2 ? '' : 'none', 'padding-top': inf0Pt + 'vh' }">
				<view class="page3-top" :style="{ display: keyboardH == 0 ? '' : 'none' }">
					<template v-if="companyName == '言影'">
						<template v-if="systemInfo.uniPlatform == 'mp-weixin' && (systemInfo.platform === 'ios' || (systemInfo.system && systemInfo.system.includes('OS')))">
							<view class="vip-pic" @tap="toContactUs('购买vip')">
								<image class="pic" :src="imgPath + 'index/page3vip.png'" mode="widthFix"></image>
							</view>
						</template>
						<template v-else>
							<view class="vip-pic" @tap="toPage('/pages/buy/buy')">
								<image class="pic" :src="imgPath + 'index/page3vip.png'" mode="widthFix"></image>
							</view>
						</template>
					</template>
					<template v-else>
						<view class="vip-pic">
							<image class="pic" :src="imgPath + 'index/page3vip.png'" mode="widthFix"></image>
						</view>
					</template>
					<view class="r">
						<view class="createAvatar" @tap="page3Redata">
							<image class="pic" :src="imgPath + 'index/Refresh.svg'" mode=""></image>
						</view>
						<view class="createAvatar" @tap="page3Submit">生成视频</view>
					</view>
				</view>
				<view class="page3-swiper" :style="{ display: keyboardH == 0 ? '' : 'none' }">
					<swiper class="swiper" @animationfinish="changePage3SwiperCurrInd" @transition.native="page3SwiperTransition_wx" @transition="page3SwiperTransition_web" :previous-margin="page3SwiperOffset + 'px'" :next-margin="page3SwiperOffset + 'px'" circular :indicator-dots="false" :autoplay="false">
						<swiper-item v-for="(item, index) in page3DataList" :key="item.id">
							<view class="swiper-item">
								<view class="pic-box" :style="{ height: page3SwiperCurrInd == index ? 98 - page3SwiperCurrH + '%' : page3SwiperCurrInd == index - 1 || page3SwiperCurrInd == index + 1 ? 86 + page3SwiperCurrH + '%' : '86%' }">
									<view class="pic-view">
										<image class="pic" :src="item.imageUrl" mode="widthFix"></image>
									</view>
									<view class="speaker" @tap="openPage3popup">
										{{ page3AudioItem && page3AudioItem.dubName ? "配音：" + page3AudioItem.dubName : "配音" }}
									</view>
									<view class="tips" v-if="item.auditType == 0">
										<view class="text1">正在审核中</view>
										<view class="text2">预计3个工作日完成交付</view>
										<view class="text2">完成结果会短信通知</view>
									</view>
									<view class="tips style2" v-if="item.auditType == 1">
										<view class="text1">{{ item.moderName }}</view>
									</view>
									<view class="tips" v-if="item.auditType == 2">
										<view class="text1">审核失败</view>
										<view class="text2">{{ item.feedbackInformation }}</view>
									</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item" @tap="toMakeAvatar">
								<view class="pic-box">
									<!-- <image class="pic" :src="imgPath + 'index/aaaaa1@2x.png'" mode="heightFix"></image> -->
									<image class="icon" :src="imgPath + 'index/add.svg'" mode="widthFix"></image>
									<view class="text">{{ "定制数字人" }}</view>
									<view class="tr-tag">
										<view
											class="tr-tag-text"
											v-if="
												userInfo &&
												userInfo.detailInfoRightList &&
												userInfo.detailInfoRightList.reduce((p, e) => {
													if (['1728692276125716481', '1728692348020281345'].includes(e.id)) {
														p = p + parseFloat(e.totalRightBalance);
													}
													return p;
												}, 0)
											"
										>
											剩余次数：{{
												userInfo.detailInfoRightList.reduce((p, e) => {
													if (["1728692276125716481", "1728692348020281345"].includes(e.id)) {
														p = p + parseFloat(e.totalRightBalance);
													}
													return p;
												}, 0) + "次"
											}}
										</view>
										<view class="tr-tag-text" v-else>剩余次数：{{ 0 }}次</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="page3-bottom">
					<view class="page3-b-btns">
						<view class="l">
							<view :class="['btn', page3Btnlist1Ind == index ? 'ac' : '']" v-for="(item, index) in page3Btnlist1" :key="index" @tap="changePage3Btnlist1Ind(index)">
								<image class="icon" :src="imgPath + 'index/' + item.icon" mode="heightFix"></image>
								<view class="text" style="font-size: 3.5vw">{{ item.text }}</view>
							</view>
						</view>
						<view class="r"></view>
					</view>
					<view class="page3-b-btns" style="border-bottom: none" v-if="page3Btnlist1Ind == 0">
						<view class="r" style="justify-content: flex-start">
							<view class="btn" v-for="(item, index) in page3Btnlist2" :key="index" @tap="page3Btnlist2Tap(item, item.args)">
								<image class="icon" :src="imgPath + 'index/' + item.icon" mode="heightFix"></image>
								<view class="text">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view class="cont" v-if="page3Btnlist1Ind == 0">
						<view class="textarea-box">
							<!-- #ifndef MP-WEIXIN -->
							<textarea v-if="footerBarListAc == 2" class="cont-textarea" :auto-blur="true" :adjust-position="false" :value="page3content" :maxlength="500" @blur="page3contentBlur" placeholder="请输入文案" @tap.stop="page3textareaTap" @input="page3contentWatch_web" @focus="page3contentFocus" />
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<textarea
								v-if="footerBarListAc == 2"
								class="cont-textarea"
								:auto-blur="true"
								:adjust-position="false"
								:value="page3content"
								:maxlength="page3contentLen"
								@blur="page3contentBlur"
								placeholder="请输入文案"
								@tap.stop="page3textareaTap"
								@input.native="page3contentWatch_wx"
								@focus="page3contentFocus"
							/>
							<!-- #endif -->
							<view class="page3-b-btns" style="border-bottom: none; padding: 0; height: 9vw" v-if="page3Btnlist1Ind == 0">
								<view class="r" style="justify-content: flex-start">
									<view class="btn" v-for="(item, index) in page3Btnlist3" :key="index" @tap="page3Btnlist2Tap(item, item.args)">
										<image class="icon" :src="imgPath + 'index/' + item.icon" mode="heightFix"></image>
										<view class="text">{{ item.text }}</view>
									</view>
								</view>
								<view class="number" v-if="1">{{ page3content.length }}/{{ page3contentLen }}</view>
							</view>
						</view>
						<view class="cont-btns" v-if="0">
							<view class="btn" v-for="(item, index) in page3Btnlist2" :key="index" @tap="page3Btnlist2Tap(item, item.args)">
								<image class="icon" :src="imgPath + 'index/' + item.icon" mode="heightFix"></image>
								<view class="text">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view class="cont" v-if="page3Btnlist1Ind == 1">
						<view v-if="audioContext && page3AudioSrc" class="audio-box">
							<!-- <audio class="audio" :src="page3AudioSrc" poster="https://h5.yainoo.com/static/assets/index/audio-pic.png" :name="'录音'" author="暂无" controls></audio> -->
							<view class="audio-cont">
								<view class="info">
									<view class="name">{{ "录音文件.mp3" }}</view>
									<view class="time">{{ seconds2time(audioCurrentTime) }}/{{ seconds2time(audioDuration) }}</view>
								</view>
								<view class="btns">
									<view class="item del" @tap="delRecordingSrc">
										<image class="icon" :src="imgPath + 'index/del.svg'" mode="widthFix"></image>
									</view>
									<view class="item play" @tap="onPlayTap">
										<image class="icon" :src="imgPath + 'index/play' + (audioPlaying ? 'ing' : 'ed') + '_back.svg'" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="rate-box">
								<slider class="slider" :value="audioCurrentTime" :min="0" :max="audioDuration" disabled />
							</view>
						</view>
						<view v-else class="showRecordView" @tap="$refs.page3LuYin.open()">
							<image class="icon" :src="imgPath + 'index/add.svg'" mode="widthFix"></image>
							<view class="text">{{ "添加音频" }}</view>
						</view>
					</view>
				</view>
				<view class="toMakeAvatar" @tap="toMakeAvatar" :style="{ display: keyboardH == 0 ? '' : 'none' }">
					<image class="pic" :src="imgPath + 'index/toMakeAvatar.svg'" mode="widthFix"></image>
				</view>
			</view>

			<scroll-view class="page4-view" scroll-y @scrolltolower="page4ContentListScroll" v-show="footerBarListAc == 3">
				<view class="page4">
					<view class="inf0" :style="{ 'padding-top': inf0Pt + 'vh' }">
						<view class="left" @touchstart="headerTouchstart" @touchend="headerTouchend">
							<image :src="userInfo.terHeaderImg || imgPath + 'index/my.png'" mode="widthFix" class="headImg"></image>
						</view>
						<view class="right">
							<view class="r-t">
								<view class="r-t-l">
									<view class="userName" v-if="userInfo.terUsername">{{ userInfo.terUsername }}</view>
									<view class="userName" v-else @tap="toPage('/pages/login/login')">{{ "请登录" }}</view>
									<view class="tag" v-if="userInfo.vipName">
										<image :src="imgPath + 'index/vipIcon.png'" mode="widthFix" class="icon"></image>
										<view class="text">{{ userInfo.vipName }}</view>
									</view>
								</view>
								<view class="r-t-r">
									<!-- <image @tap="toPage('/pages/my/my')" :src="imgPath + 'index/more.svg'" mode="widthFix" class="more"></image> -->
									<image @tap="loginOut" :src="imgPath + 'index/loginout2.svg'" mode="widthFix" class="more"></image>
								</view>
							</view>
							<view class="r-b">
								<view class="userId">{{ companyName }}号：{{ userInfo.terIphone || "请登录" }}</view>
								<image :src="imgPath + 'index/copy.svg'" mode="widthFix" class="copy"></image>
							</view>
						</view>
					</view>
					<view class="vip-inf0">
						<image :src="imgPath + 'index/vipBgi.svg'" mode="widthFix" class="bgi"></image>
						<view class="vip-inf0-cont">
							<view class="t">
								<view class="t-l">
									<image :src="imgPath + 'index/VIP.svg'" mode="widthFix" class="t-l-t"></image>
									<view class="t-l-b" v-if="userInfo.vipTime">会员有效期：{{ userInfo.vipTime }}</view>
									<view class="t-l-b" v-else>普通用户</view>
								</view>
								<view class="t-r">
									<view class="btn">
										<template v-if="companyName == '言影'">
											<view class="text" v-if="systemInfo.platform === 'ios' || (systemInfo.system && systemInfo.system.includes('OS'))" @tap="toContactUs('购买vip')">{{ "联系我们" }}</view>
											<view class="text" v-else @tap="toPage('/pages/buy/buy')">{{ userInfo.vipTime ? "立即续费" : "成为会员" }}</view>
										</template>
										<view class="text" v-else @tap="$refs.RedemptionCode.open()">{{ "兑换码" }}</view>
									</view>
								</view>
							</view>
							<view class="b">
								<view class="b-l">{{ userInfo.goldNum ? userInfo.goldNum : 0 }}算力</view>
								<view class="b-r">算力剩余</view>
							</view>
						</view>
					</view>
					<view class="property">
						<view class="list" v-if="userInfo.detailInfoRightList">
							<view class="item" v-for="(item, index) in userInfo.detailInfoRightList" :key="index">
								<view class="text1">{{ item.totalRightBalance }}</view>
								<view class="text2">{{ item.rightsDescript }}</view>
								<view class="tag">可升级</view>
							</view>
						</view>
					</view>
					<view class="content-main">
						<view class="tabbar-box" @tap.stop="">
							<view class="tabbar">
								<view :class="['tabbar-item', '_page4', page2TabbarAc == index ? 'ac' : '']" v-for="(item, index) in page2TabbarList" :key="index" @click="changePage2TabbarAc(item, index)">
									<view class="ac-v"></view>
									<view class="text">
										{{ item.text }}
									</view>
								</view>
							</view>
							<view class="filter">
								<view :class="['filter-item', page4FilterAc == index ? 'ac' : '']" v-for="(item, index) in page4FilterList" :key="index" @click="changePage4FilterAc(item, index)">
									{{ item.text }}
								</view>
							</view>
						</view>
						<template v-if="page4FilterAc == 0">
							<view class="content-list" v-if="page2TabbarAc == 0">
								<custom-waterfalls-flow v-if="userVideoList.length != 0" ref="userVideoListRef" :value="userVideoList" :column="2" :columnSpace="1.5" :seat="2">
									<!-- #ifdef MP-WEIXIN -->
									<view class="content-item" v-for="(item, index) in userVideoList" :key="index" slot="slot{{index}}">
										<view class="show" @click="seeUserVideo(item, index)">
											<image class="pic" :src="item.coverUrl" mode="widthFix"></image>
											<view class="loading" v-if="!item.videoStatus && item.schedule != 100">
												<image class="loading-gif" :src="imgPath + 'components/PageLoading/65282234.gif'" mode="widthFix"></image>
												<!-- <image class="loading-gif" :src="imgPath + 'index/loading.gif'" mode="widthFix"></image> -->
												<!-- <view class="loader">
													<view class="item" v-for="(item, index) in 8" :key="item" :ind="index"><view class="dot"></view></view>
												</view> -->
												<view class="schedule">{{ item.schedule }}%</view>
											</view>
										</view>
										<view class="info">
											<view class="text">{{ item.videoName }}</view>
										</view>
										<view class="err-tag" v-if="item.videoStatus == 1">
											<view class="text">{{ "合成失败" }}</view>
										</view>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="{ item, index }">
										<view class="content-item">
											<view class="show">
												<image class="pic" :src="item.coverUrl" mode="widthFix" @click="seeUserVideo(item, index)"></image>
												<view class="loading" v-if="!item.videoStatus && item.schedule != 100">
													<image class="loading-gif" :src="imgPath + 'components/PageLoading/65282234.gif'" mode="widthFix"></image>
													<!-- <image class="loading-gif" :src="imgPath + 'index/loading.gif'" mode="widthFix"></image> -->
													<!-- <view class="loader">
														<view class="item" v-for="(item, index) in 8" :key="item" :ind="index"><view class="dot"></view></view>
													</view> -->
													<view class="schedule">{{ item.schedule }}%</view>
												</view>
											</view>
											<view class="info">
												<view class="text">{{ item.videoName }}</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
								</custom-waterfalls-flow>
								<view class="kong-page" v-else>
									<view class="kpic-box">
										<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
										<view class="text">暂无视频</view>
									</view>
								</view>
							</view>
							<view class="content-list" v-if="page2TabbarAc == 1">
								<custom-waterfalls-flow v-if="userDraft.length != 0" ref="userDraftRef" :value="userDraft" :column="2" :columnSpace="1.5" :seat="2">
									<!-- #ifdef MP-WEIXIN -->
									<view class="content-item" v-for="(item, index) in userDraft" :key="index" slot="slot{{index}}">
										<view class="show" @click="pickDraft(item, index)">
											<image class="pic" :src="item.draftUrl" mode="widthFix"></image>
										</view>
										<view class="info">
											<view class="text">{{ item.caoName }}</view>
										</view>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="{ item, index }">
										<view class="content-item">
											<view class="show">
												<image class="pic" :src="item.draftUrl" mode="widthFix" @click="pickDraft(item, index)"></image>
											</view>
											<view class="info">
												<view class="text">{{ item.caoName }}</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
								</custom-waterfalls-flow>
								<view class="kong-page" v-else>
									<view class="kpic-box">
										<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
										<view class="text">暂无草稿</view>
									</view>
								</view>
							</view>
						</template>
						<template v-if="page4FilterAc == 1">
							<view class="content-list" v-if="page2TabbarAc == 0">
								<custom-waterfalls-flow v-if="getUserAudioPayload1.dataList.length != 0" ref="userVideoListRef" :value="getUserAudioPayload1.dataList" :column="2" :columnSpace="1.5" :seat="2">
									<!-- #ifdef MP-WEIXIN -->
									<view class="content-item" v-for="(item, index) in getUserAudioPayload1.dataList" :key="index" slot="slot{{index}}">
										<view class="show" @tap="shiTing(item, index)">
											<image class="pic" :src="imgPath + 'index/audio-pic.png'" mode="widthFix"></image>
											<view class="playView" v-if="item.isPlay">
												<view class="btns">
													<view class="item play" @tap.stop="shiTing(item, index)">
														<image class="icon" :src="imgPath + 'index/play' + (item.isPlay ? 'ing' : 'ed') + '_back.svg'" mode="widthFix"></image>
													</view>
												</view>
											</view>
										</view>
										<view class="info">
											<view class="text">{{ item.audioName }}</view>
										</view>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="{ item, index }">
										<view class="content-item">
											<view class="show" @tap="shiTing(item, index)">
												<image class="pic" :src="imgPath + 'index/audio-pic.png'" mode="widthFix"></image>
												<view class="playView" v-if="item.isPlay">
													<view class="btns">
														<view class="item play" @tap.stop="shiTing(item, index)">
															<image class="icon" :src="imgPath + 'index/play' + (item.isPlay ? 'ing' : 'ed') + '_back.svg'" mode="widthFix"></image>
														</view>
													</view>
												</view>
											</view>
											<view class="info">
												<view class="text">{{ item.audioName }}</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
								</custom-waterfalls-flow>
								<view class="kong-page" v-else>
									<view class="kpic-box">
										<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
										<view class="text">暂无音频</view>
									</view>
								</view>
							</view>
							<view class="content-list" v-if="page2TabbarAc == 1">
								<custom-waterfalls-flow v-if="getUserAudioPayload0.dataList.length != 0" ref="userDraftRef" :value="getUserAudioPayload0.dataList" :column="2" :columnSpace="1.5" :seat="2">
									<!-- #ifdef MP-WEIXIN -->
									<view class="content-item" v-for="(item, index) in getUserAudioPayload0.dataList" :key="index" slot="slot{{index}}">
										<view class="show" @click="">
											<image class="pic" :src="imgPath + 'index/audio-pic.png'" mode="widthFix"></image>
										</view>
										<view class="info">
											<view class="text">{{ item.audioName }}</view>
										</view>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="{ item, index }">
										<view class="content-item">
											<view class="show">
												<image class="pic" :src="imgPath + 'index/audio-pic.png'" mode="widthFix" @click=""></image>
											</view>
											<view class="info">
												<view class="text">{{ item.audioName }}</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
								</custom-waterfalls-flow>
								<view class="kong-page" v-else>
									<view class="kpic-box">
										<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
										<view class="text">暂无草稿</view>
									</view>
								</view>
							</view>
						</template>
						<template v-if="page4FilterAc == 2">
							<view class="content-list" v-if="page2TabbarAc == 0">
								<custom-waterfalls-flow v-if="userVideoList.length != 0 && 0" ref="userVideoListRef" :value="userVideoList" :column="2" :columnSpace="1.5" :seat="2">
									<!-- #ifdef MP-WEIXIN -->
									<view class="content-item" v-for="(item, index) in userVideoList" :key="index" slot="slot{{index}}">
										<view class="show" @click="seeUserVideo(item, index)">
											<image class="pic" :src="item.coverUrl" mode="widthFix"></image>
											<view class="loading" v-if="!item.videoStatus && item.schedule != 100">
												<image class="loading-gif" :src="imgPath + 'components/PageLoading/65282234.gif'" mode="widthFix"></image>
												<!-- <image class="loading-gif" :src="imgPath + 'index/loading.gif'" mode="widthFix"></image> -->
												<!-- <view class="loader">
													<view class="item" v-for="(item, index) in 8" :key="item" :ind="index"><view class="dot"></view></view>
												</view> -->
												<view class="schedule">{{ item.schedule }}%</view>
											</view>
										</view>
										<view class="info">
											<view class="text">{{ item.videoName }}</view>
										</view>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="{ item, index }">
										<view class="content-item">
											<view class="show">
												<image class="pic" :src="item.coverUrl" mode="widthFix" @click="seeUserVideo(item, index)"></image>
												<view class="loading" v-if="!item.videoStatus && item.schedule != 100">
													<image class="loading-gif" :src="imgPath + 'components/PageLoading/65282234.gif'" mode="widthFix"></image>
													<!-- <view class="loader">
														<view class="item" v-for="(item, index) in 8" :key="item" :ind="index"><view class="dot"></view></view>
													</view> -->
													<!-- <image class="loading-gif" :src="imgPath + 'index/loading.gif'" mode="widthFix"></image> -->
													<view class="schedule">{{ item.schedule }}%</view>
												</view>
											</view>
											<view class="info">
												<view class="text">{{ item.videoName }}</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
								</custom-waterfalls-flow>
								<view class="kong-page" v-else>
									<view class="kpic-box">
										<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
										<view class="text">暂无绘画</view>
									</view>
								</view>
							</view>
							<view class="content-list" v-if="page2TabbarAc == 1">
								<custom-waterfalls-flow v-if="userDraft.length != 0 && 0" ref="userDraftRef" :value="userDraft" :column="2" :columnSpace="1.5" :seat="2">
									<!-- #ifdef MP-WEIXIN -->
									<view class="content-item" v-for="(item, index) in userDraft" :key="index" slot="slot{{index}}">
										<view class="show" @click="pickDraft(item, index)">
											<image class="pic" :src="item.draftUrl" mode="widthFix"></image>
										</view>
										<view class="info">
											<view class="text">{{ item.caoName }}</view>
										</view>
									</view>
									<!-- #endif -->
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="{ item, index }">
										<view class="content-item">
											<view class="show">
												<image class="pic" :src="item.draftUrl" mode="widthFix" @click="pickDraft(item, index)"></image>
											</view>
											<view class="info">
												<view class="text">{{ item.caoName }}</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
								</custom-waterfalls-flow>
								<view class="kong-page" v-else>
									<view class="kpic-box">
										<image class="k-pic" :src="imgPath + 'index/kongPage.svg'" mode="widthFix"></image>
										<view class="text">暂无草稿</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</scroll-view>

			<!-- #ifdef MP-WEIXIN -->
			<view
				class="contact-box"
				:style="{
					width: contactObj.size + 'px',
					height: contactObj.size + 'px',
					left: contactObj.calcX + 'px',
					top: contactObj.calcY + 'px'
				}"
			>
				<button @touchstart.prevent.native="contact_down" @touchmove.prevent.stop.native="contact_move" @touchend.prevent.stop.native="contact_up" class="contact" ref="contact" style="font-size: 32rpx" open-type="contact" bindcontact="handleContact">
					<image class="png" :src="imgPath + 'index/contact.png'" mode=""></image>
				</button>
			</view>
			<!-- #endif -->

			<view class="browse-video" v-if="matData[browseVideoAc] && browseVideoShow">
				<video class="videoEl" id="browseVideoEl" ref="browseVideoEl" object-fit="contain" :src="matData[browseVideoAc].previewVideo" :autoplay="true"></video>
				<view class="back" @click="closeBrowseVideo">
					<image class="icon" :src="imgPath + 'index/back.svg'" mode=""></image>
				</view>
				<view class="inCreateVideoBtn">
					<view class="btn" @click="pickTemplate(matData[browseVideoAc], browseVideoAc)">使用模板</view>
				</view>
			</view>

			<view class="browse-video" v-else-if="userVideoList[userVideoAc] && browseVideoShow">
				<video class="videoEl" id="userVideoEl" ref="userVideoEl" object-fit="contain" :src="userVideoList[userVideoAc].videoUrlYy" :autoplay="true"></video>
				<view class="back" @click="closeBrowseVideo">
					<image class="icon" :src="imgPath + 'index/back.svg'" mode=""></image>
				</view>
			</view>

			<view class="footer-bar" v-else :style="{ background: [1, '1', 2, '2'].includes(footerBarListAc) ? 'rgba(27, 48, 44, 1)' : '', color: footerBarListAc == 1 ? '#fff' : 'rgba(153, 153, 153, 1)' }">
				<view :class="['footer-bar-item', footerBarListAc == item.ac ? 'ac' : '']" v-for="(item, index) in footerBarList" @tap.stop="changeFooterBarListAc({ item, index })" :key="index">
					<image :src="imgPath + 'createAvatar/footer-icon/' + item.icon + (footerBarListAc == item.ac ? '-ac' : '') + '.svg'" mode="" class="icon"></image>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>

			<view class="selectChicun" :style="{ height: webStyle.height }" @tap.stop="closeSelectChicunShow" v-show="selectChicunShow">
				<view class="MyDialog">
					<view class="top">
						<view class="left"></view>
						<view class="title">选择视频尺寸</view>
						<view class="right">
							<!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14" fill="none" class="close" @tap="closeSelectChicunShow">
									<path fill-rule="evenodd" fill="#999999" d="M12.76 0L7 5.76L1.24 0L0 1.24L5.76 7L0 12.76L1.24 14L7 8.24L12.76 14L14 12.76L8.24 7L14 1.24L12.76 0Z"></path>
								</svg> -->
						</view>
					</view>
					<view class="btns-list" @tap.stop="">
						<view :class="['item', index == chicunInd ? 'ac' : '']" v-for="(item, index) in chicunList" :key="index" @tap="selectChicunAc(item, index)">
							<!-- <view class="text">{{ item.size }}</view> -->
							<view class="left">
								<view class="text">{{ item.text }}</view>
								<view class="resolution">{{ item.resolution }}</view>
							</view>
							<view class="right">
								<view class="size">{{ item.size }}</view>
							</view>
							<view class="dui">
								<image class="icon" :src="imgPath + 'index/dui.svg'" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="btn" @tap="createVideo">立即创作</view>
				</view>
			</view>

			<view class="dialog-newUser" v-if="newUserDialogShow" @tap="closeNewUserDialogShow">
				<view class="dialog-newUser-content">
					<image class="dialog-newUser-bgi" :src="imgPath + 'index/newUser_dialog_pro.png'" mode="widthFix"></image>
					<!-- <image class="pic-text" :src="imgPath + 'index/newUser_text.png'" mode="widthFix"></image>
					<view class="btn">
						<view class="text" @tap="newUserDialogShow = false">{{ "开启数字人之旅" }}</view>
					</view> -->
				</view>
			</view>
			<!-- <audio style="position: absolute; top: 20vw; left: 0" :src="shiTingSrc" @error="audioErr" :controls="true"></audio> -->
			<uni-popup ref="page3popup" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0" style="z-index: 9999" @change="changePage3popupShow">
				<view class="page3popup-view">
					<view class="popup-title">选择配音</view>
					<view class="popup-main" style="height: auto" v-if="!!userInfo.token">
						<PickSpeaker
							@changeSpeed="changePage3Speed"
							:pageShow="pageShow"
							@changePitch="changePage3Pitch"
							@changeVolume="changePage3Volume"
							@pickSpeaker="pickPage3Speaker"
							@removeSpeaker="removePage3Speaker"
							:selectItem="page3AudioItem"
							:content="page3content"
							:show="page3popupShow"
						></PickSpeaker>
					</view>
				</view>
			</uni-popup>

			<uni-popup ref="page3LuYin" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0" style="z-index: 9999" @change="changePage3LuYinShow">
				<LuYin ref="LuYin" :show="page3LuYinShow" @close="$refs.page3LuYin.close()" :isLoop="true" @join="page3AddAudioSrc"></LuYin>
			</uni-popup>
			<uni-popup ref="RedemptionCode" type="dialog">
				<uni-popup-dialog ref="RedemptionCodeDialog" :focus="false" mode="input" title="输入兑换码" value="" placeholder="请输入兑换码" :showClose="true" @confirm="RedemptionCodeConfirm"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="buyPopup" type="dialog">
				<uni-popup-dialog mode="base" title="温馨提示" :confirmText="companyName != '言影' ? '确定' : systemInfo.platform === 'ios' || (systemInfo.system && systemInfo.system.includes('OS')) ? '联系客服' : '购买vip'" :showClose="true" @confirm="toBuyPage('buyPopup')">
					<view class="tips" style="color: #000">克隆次数不足！</view>
				</uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="buyPopup2" type="dialog">
				<uni-popup-dialog mode="base" title="温馨提示" :confirmText="companyName != '言影' ? '确定' : systemInfo.platform === 'ios' || (systemInfo.system && systemInfo.system.includes('OS')) ? '联系客服' : '购买vip'" :showClose="true" @confirm="toBuyPage('buyPopup')">
					<view class="tips" style="color: #000">开通会员畅享AI爆款文案无限制作</view>
				</uni-popup-dialog>
			</uni-popup>
			<LoginDialog ref="LoginDialog" :show="LoginDialogShow" @successFn="loginDialogShowSucc" @changeShow="changeLoginDialogShow" style="z-index: 999"></LoginDialog>
		</template>
		<template v-else>
			<image class="sss" :src="srcsss" mode="widthFix"></image>
			<view class="" style="color: #000">
				{{ srcsss }}
			</view>
		</template>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import matData from "./data.js";
import * as api from "@/api/home.js";
import PickSpeaker from "./components/PickSpeaker/PickSpeaker.vue";
import LuYin from "./components/LuYin/LuYin.vue";

let page3contentWatchTimer = null;
let timer = null;

let headerTouchTime = 0;
let headerTouchTimer = 0;
export default {
	name: "Index",
	data() {
		return {
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			contactObj: {
				size: 60,
				footerBarSize: null,
				prevX: -60 / 2,
				prevY: 100,
				initX: "",
				initY: "",
				calcX: -60 / 2,
				calcY: 100
			},
			srcsss: "http://192.168.124.116:2222/video1/1746914556072841217cover.webp",
			RedemptionCodeVal: "",
			LoginDialogShow: false,
			audioContext: null,
			audioDuration: 0,
			audioPlaying: false,
			audioCurrentTime: 0,
			page3LuYinShow: true,
			page3AudioSrc: "",
			page3content: "",
			page3contentCache: null,
			page3contentLen: 500,
			page3thirdpartyId: "",
			page3popupShow: false,
			page3speed: 1.1,
			page3pitch: 0,
			page3volume: 100,
			page3SwiperOffset: 0,
			page3SwiperCurrH: 0,
			page3SwiperCurrInd: 0,
			page3DataList: [],
			page3AvatarData: null,
			page3AudioItem: {},
			page3AudioList: [],
			page3Btnlist1Ind: 0,
			page3Btnlist1: [
				{
					text: "文案",
					icon: "page3icon1.svg"
				},
				{
					text: "录音",
					icon: "page3icon2.svg"
				}
			],
			page3Btnlist2: [
				{
					id: 3,
					text: "配音",
					fnName: "openPage3popup",
					icon: "Speak.svg",
					args: [{ item: { ac: 7 } }]
				},
				{
					id: 5,
					text: "试听",
					fnName: "shitingCont",
					icon: "volume.svg",
					args: []
				},

				{
					id: 1,
					text: "AI创作",
					fnName: "toAICont",
					icon: "page3icon6.svg",
					args: []
				},
				{
					id: 2,
					text: "热点文案",
					fnName: "toHotspotPage",
					icon: "page3icon5.svg",
					args: []
				}

				// {
				// 	text: "提交",
				// 	fnName: "submit",
				// 	icon: "page3icon5.svg"
				// }
			],
			page3Btnlist3: [
				{
					id: 6,
					text: "随机",
					fnName: "randomCont",
					icon: "page3icon4.svg",
					args: [tools.contList]
				},
				{
					id: 4,
					text: "链接提取",
					fnName: "toBigBreakPage",
					icon: "page3icon5.svg",
					args: []
				}
			],
			newUserDialogShow: false,
			waterfallsFlowRefShow: true,
			title: "Hello",
			inf0Pt: 0,
			userInfo: {},
			systemInfo: {},
			webStyle: {
				height: ""
			},
			selectChicunShow: false,
			chicunInd: 0,
			chicunList: [
				{
					id: 2,
					size: "9:16",
					resolution: "1080*1920",
					className: "chicun-9-16",

					text: "竖版视频"
				},
				{
					id: 1,
					size: "16:9",
					resolution: "1920*1080",
					className: "chicun-16-9",
					text: "横板视频"
				}
			],
			tabbarListIn2CurItem: null,
			tabbarListIn2: [],
			page4FilterAc: 0,
			page4FilterList: [
				{
					text: "视频"
				},
				{
					text: "音频"
				},
				{
					text: "绘画"
				}
			],
			page2TabbarAc: 0,
			page2TabbarList: [
				{
					id: 1,
					text: "作品"
				},
				{
					id: 0,
					text: "草稿"
				}
			],
			getUserDraftPayload: {
				currentPage: 1,
				pageSize: 999,
				total: 0,
				reqId: tools.createID()
			},
			userDraft: [],
			userVideoList: [],
			userVideoAc: -1,
			getUserVideoPayload: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			getUserAudioPayload0: {
				currentPage: 1,
				pageSize: 999,
				total: 0,
				dataList: []
			},
			getUserAudioPayload1: {
				currentPage: 1,
				pageSize: 999,
				total: 0,
				dataList: [],
				playInd: -1
			},
			shiTingCtx: null,
			shiTingContCtx: null,
			shiTingSrc: "",
			pageShow: true,
			footerBarListAc: 1,
			footerBarList: [
				{
					ac: 1,
					icon: "f1",
					type: "f1",
					text: "AI视频",
					pageAc: 0
				},
				{
					ac: 2,
					icon: "f2",
					type: "f2",
					text: "AI分身"
				},
				{
					ac: 3,
					icon: "f3",
					type: "f3",
					text: "我的"
				}
			],
			matData: [],
			matDataColumn: 2,
			matDataPageSize: 15,
			matDataCurrentPage: 1,
			browseVideoAc: -1,
			browseVideoShow: false,
			hottopList: [
				// {
				// 	text: "是什么突然让你放弃一段感情",
				// 	dot: "#ff0000"
				// },
				// {
				// 	text: "是什么突然让你放弃一段感情",
				// 	dot: "#f3ad33"
				// },
				// {
				// 	text: "是什么突然让你放弃一段感情",
				// 	dot: "#00997f"
				// }
			],
			topList: [
				{
					id: 1,
					text: "爆款文案创作",
					icon: "top4.svg",
					path: "",
					bgc: "linear-gradient(225deg, rgba(255, 242, 105, 1) 0%, rgba(255, 159, 15, 1) 100%)"
				},
				{
					id: 2,
					text: "爆款视频翻拍",
					icon: "top4.svg",
					path: "/pages/bigBreak/bigBreak",
					bgc: "linear-gradient(217.51deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%)"
				},
				{
					id: 8,
					text: "声音克隆",
					icon: "top4.svg",
					path: "/pages/MakeSound/MakeSound",
					bgc: "linear-gradient(217.51deg,rgba(107, 158, 40, 1) 0%, rgba(247, 225, 111, 1)  100%)"
				},
				{
					id: 4,
					text: "数字演员",
					icon: "top4.svg",
					path: "/pages/pickAvatar/pickAvatar",
					bgc: "linear-gradient(135deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%)"
				},

				{
					id: 5,
					text: "智能体",
					icon: "icon4.svg",
					path: "/pages/AIContMenu/AIContMenu",
					bgc: "linear-gradient(217.51deg, rgba(255, 242, 105, 1) 0%, rgba(255, 159, 15, 1) 100%)"
				},
				// {
				// 	text: "快速成片",
				// 	icon: "icon4.svg",
				// 	path: "",
				// 	bgc: "linear-gradient(221.33deg, rgba(234, 240, 134, 1) 0%, rgba(93, 212, 143, 1) 100%)"
				// },
				{
					id: 6,
					text: "照片说话",
					icon: "top2.svg",
					path: "",
					bgc: "linear-gradient(135deg, rgba(107, 158, 40, 1) 0%, rgba(247, 225, 111, 1) 100%)"
					// bgc: "linear-gradient(225deg, rgba(255, 242, 105, 1) 0%, rgba(255, 159, 15, 1) 100%)"
				},
				{
					id: 3,
					text: "一键成片",
					icon: "top4.svg",
					path: "",
					bgc: "linear-gradient(225deg, rgba(255, 242, 105, 1) 0%, rgba(255, 159, 15, 1) 100%)"
				},
				{
					id: 7,
					text: "文本转语音",
					icon: "top3.svg",
					// path: "/pages/createVideo/createVideo",
					path: "",
					bgc: "linear-gradient(313.28deg, #06d4b8 0%, #a1f071 99.72%)"
					// bgc: "linear-gradient(217.51deg, rgba(27, 161, 250, 1) 0%, rgba(0, 255, 174, 1) 100%)"
				}
			],
			tabbarList: [
				{
					text: "AI绘画",
					icon: "pic1.png"
				},
				{
					text: "定制形象",
					icon: "pic4.png"
				},
				{
					text: "定制声音",
					icon: "pic3.png"
				},
				{
					text: "邀请奖励",
					icon: "pic5.png"
				}
			],
			classificationInd: 0,
			classification: [],
			chicunRange: [
				{
					text: "横屏",
					id: 1
				},
				{
					text: "竖屏",
					id: 2
				}
			],
			chicunAc: 1,
			inviteLink: "",
			rightList: [],

			myPage_sub3: {
				duanshipinInfo: {
					youxiaoqi: "2023-12-09",
					dataList1: [
						{
							id: 4,
							icon: "icon1_4",
							title: "短视频时长",
							num: "0",
							unitText: "时间/分钟",
							classList: ["text3"]
						},
						{
							id: 2,
							icon: "icon1_2",
							title: "我的成片",
							num: "0",
							unitText: "数量/个",
							classList: []
						},
						{
							id: 3,
							icon: "icon1_3",
							title: "可用空间",
							num: "0.00",
							unitText: "缓存空间/GB",
							classList: []
						},
						{
							id: 1,
							icon: "icon1_1",
							title: "我的项目",
							num: "0",
							unitText: "数量/个",
							classList: []
						}
					]
				},
				twoDhuiyuanInfo: {
					youxiaoqi: "2023-12-09",
					dataList1: [
						{
							id: 2,
							icon: "icon2_1",
							title: "直播时长",
							num: "0",
							unitText: "时间/分钟",
							classList: ["text3"]
						},
						{
							id: 1,
							icon: "icon2_1",
							title: "我的直播间",
							num: "0",
							unitText: "数量/个",
							classList: []
						}
					]
				},
				b_dataList: [
					{
						id: 1,
						text: "形象定制",
						unit: "次",
						num: "0"
					},
					{
						id: 2,
						text: "声音克隆定制",
						unit: "次",
						num: "0"
					},
					{
						id: 3,
						text: "直播时长",
						unit: "次",
						num: "0"
					},
					{
						id: 4,
						text: "漫画次数",
						unit: "次",
						num: "0"
					},
					{
						id: 5,
						text: "数字人租赁次数",
						unit: "",
						num: "0"
					},
					{
						id: 6,
						text: "视频制作次数",
						unit: "",
						num: "0"
					},
					{
						id: 7,
						text: "视频制作次数",
						unit: "",
						num: "0"
					},
					{
						id: 8,
						text: "视频制作次数",
						unit: "",
						num: "0"
					}
				]
			},
			myPage_sub1_top1: {
				list: [
					{
						id: 1,
						iconBgc: "rgba(247, 237, 252, 1)",
						iconC: "rgba(230, 172, 115, 1)",
						icon: "myPage-sub1-top1",
						text: "金币余额",
						num: 0,
						btnText: "去充值",
						tabAc: 1,
						tabList: [
							{ id: 1, text: "充值明细", icon: "chongzhi" },
							{ id: 2, text: "金币消耗", icon: "xiaohao" }
						],
						pageSizes: [5, 10, 20, 50],
						total: 0,
						currentPage: 1,
						pageSize: 5,
						dataList1: [
							// {
							//     OrderNumber: '订单编号',
							//     RechargeSource: '充值来源',
							//     RechargeType: '充值类型',
							//     ProductName: '商品名称',
							//     RechargeLimit: '充值额度',
							//     PaymentAmount: '付款金额',
							//     ContractAmount: '合同金额',
							//     OrderStatus: '订单状态',
							//     PaymentMethod: '支付方式',
							//     OrderTime: '下单时间',
							// },
						],
						currentPage2: 1,
						pageSize2: 10,
						total2: 0,
						dataList2: [],
						show: true
					},
					{
						id: 2,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top2",
						text: "视频时长余额",
						num: 0,
						btnText: "去充值"
					},
					{
						id: 3,
						iconBgc: "rgba(255, 254, 227, 1)",
						iconC: "rgba(204, 195, 63, 1)",
						icon: "myPage-sub1-top3",
						text: "绘画次数余额",
						num: 0,
						btnText: "联系客服"
					},
					{
						id: 4,
						iconBgc: "rgba(237, 246, 252, 1)",
						iconC: "rgba(21, 153, 209, 1)",
						icon: "myPage-sub1-top4",
						text: "音频时长余额",
						num: 0,
						btnText: "去充值"
					},
					{
						id: 5,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top5",
						text: "短视频合成时长",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 6,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top6",
						text: "直播合成时长",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 7,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top7",
						text: "绘画次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 8,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top8",
						text: "变声次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 9,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top7",
						text: "形象克隆次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 10,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top10",
						text: "声音克隆次数",
						num: 0,
						btnText: "去充值",
						show: true
					},
					{
						id: 10,
						iconBgc: "rgba(241, 251, 247, 1)",
						iconC: "rgba(124, 180, 66, 1)",
						icon: "myPage-sub1-top11",
						text: "数字名片",
						num: 0,
						btnText: "去充值",
						show: true
					}
				],
				ac: 1
			},
			getVirtualcoinrationData: [],
			keyboardH: 0
		};
	},
	created() {
		this.initAudioContext();
	},
	mounted() {
		this.handleWindowResize();
	},
	onLoad(option) {
		this.initSystemInfo();
		this.initUserInfo();
		this.initPageAc(option);
		this.initMat();
		this.initHottopList();
		// this.initMatData();
		this.initTabbarListIn2();
		this.getPage3AudioList();
		if (this.footerBarListAc == 3) {
			// this.initUserData();
			this.getUserVideo();
			this.getUserDraft();
			this.postAndioselectApi({
				typeId: 0
			});
			this.postAndioselectApi({
				typeId: 1
			});
			this.getUserVipStatus();
		}
	},
	onHide() {
		this.pageShow = false;
	},
	onShow() {
		this.pageShow = true;
		this.initNewUserDialogShow();
		if (this.footerBarListAc == 2) {
			this.getUserVipStatus();
			this.getSelectauditlist();
		}
		let aiCont = uni.getStorageSync("aiCont");
		if (aiCont) {
			this.page3content = aiCont.cont.slice(0, this.page3contentLen);
			this.footerBarListAc = 2;
			uni.removeStorageSync("aiCont");
		}
	},
	onShareAppMessage: function (res) {
		// 如果要自定义分享内容，可以设置shareTicket和query参数
		let pathInfo = `footerBarListAc=${this.footerBarListAc}`;
		let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
		let inviteInfo = userInfo?.detailInfo?.inviteUrl;
		if (inviteInfo) {
			inviteInfo = userInfo?.detailInfo?.inviteUrl.slice(inviteInfo.indexOf("?") + 1);
		}
		let path = `/pages/index/index?${pathInfo}&${inviteInfo}`;
		return {
			title: this.companyName + "数字人",
			path: path
			// imageUrl: "/static/share.jpg" // 分享卡片的图片
		};
	},
	watch: {
		["page3AudioItem.dubName"](val) {
			let index = this.page3Btnlist2.findIndex((e) => e.id == 3);
			this.page3Btnlist2[index].text = val ? "配音：" + val : "配音";
		}
	},
	computed: {
		// 秒数转时间
		seconds2time() {
			return (index_num) => {
				// tools.seconds2time;

				// let getHours = (parseInt(index_num / 60 / 60) % 12).toString().padStart(2, 0);
				// let getMinutes = (parseInt(index_num / 60)% 60).toString().padStart(2, 0);
				let getMinutes = parseInt(index_num / 60)
					.toString()
					.padStart(2, 0);
				let getSeconds = (index_num % 60).toFixed(2);
				if (getSeconds < 10) getSeconds = "0" + getSeconds;
				// let str = `${getHours}.${getMinutes}.${getSeconds}`;
				let str = `${getMinutes}:${getSeconds}`;
				return str;
			};
		}
	},
	methods: {
		audioErr(err) {
			console.log(err);
		},
		//测试
		testaaa() {
			console.log(this.matData);
		},
		// 头像点击开始
		headerTouchstart() {
			headerTouchTime = Date.now();
			headerTouchTimer = setTimeout(() => {
				tools.easyToast("操作成功!");
				headerTouchTimer = null;
			}, 5200);
		},
		// 头像点击结束
		headerTouchend() {
			const time = Date.now();
			if (headerTouchTimer) {
				clearTimeout(headerTouchTimer);
				headerTouchTimer = null;
			}
			if (time - headerTouchTime >= 5 * 1000) {
				this.toMyPage();
			}
		},
		// 跳转我的页面
		toMyPage() {
			if (!this.userInfo.terUsername) return;
			this.toPage("/pages/my/my");
		},
		// 客服按钮移动
		contact_down(event) {
			// event.preventDefault();
			// 获取初始触碰坐标
			let { pageX, pageY } = event.changedTouches[0];
			this.contactObj.initX = pageX;
			this.contactObj.initY = pageY;
			this.contactObj.calcX = pageX - this.contactObj.size / 2;
			this.contactObj.calcY = pageY - this.contactObj.size / 2;
		},
		// 客服按钮移动
		contact_move(event) {
			let { pageX, pageY } = event.changedTouches[0];
			let { prevX, prevY } = this.contactObj;
			let calcX = pageX - this.contactObj.initX;
			let calcY = pageY - this.contactObj.initY;

			this.contactObj.calcX = prevX + calcX;
			this.contactObj.calcY = prevY + calcY;
			if (this.systemInfo.windowWidth < this.contactObj.calcX + this.contactObj.size) {
				this.contactObj.calcX = this.systemInfo.windowWidth - this.contactObj.size * (2 / 3);
			}
			if (0 > this.contactObj.calcX) {
				this.contactObj.calcX = -this.contactObj.size * (1 / 3);
			}
			if (this.systemInfo.windowHeight < this.contactObj.calcY + this.contactObj.size) {
				this.contactObj.calcY = this.systemInfo.windowHeight - this.contactObj.size * (2 / 3);
			}
			if (0 > this.contactObj.calcY) {
				this.contactObj.calcY = -this.contactObj.size * (1 / 3);
			}
		},
		// 客服按钮移动
		contact_up(event) {
			this.contactObj.prevX = this.contactObj.calcX;
			this.contactObj.prevY = this.contactObj.calcY;
		},
		// page4滚动
		page4ContentListScroll() {
			console.log("page4滚动", this.page4FilterAc, this.page2TabbarAc);
			const that = this;
			if (timer) clearTimeout(timer);
			timer = setTimeout(async () => {
				switch (this.page4FilterAc) {
					case 0: //视频
						if (this.page2TabbarAc == 0) {
							if (this.getUserVideoPayload.total != this.userVideoList.length) {
								this.getUserVideoPayload.currentPage++;
								await this.getUserVideo();
							}
						} else if (this.page2TabbarAc == 1) {
						}
						break;
					case 1: //音频
						if (this.page2TabbarAc == 0) {
						} else if (this.page2TabbarAc == 1) {
						}
						break;
					case 2: //绘画
						if (this.page2TabbarAc == 0) {
						} else if (this.page2TabbarAc == 1) {
						}
						break;
					default:
						break;
				}
				clearTimeout(timer);
				timer = null;
				return;
				if (that.tabbarAc == 0) {
					if (this.yusheTotal === this.yushe.length) return;
					this.yusheCurrent++;
					await this.getAvatarData();
				} else {
					if (this.gerenTotal === this.geren.length) return;
					this.gerenCurrent++;
					await this.getAvatarData2();
				}
				clearTimeout(timer);
				timer = null;
			}, 200);
		},
		// 兑换码弹框确定
		async RedemptionCodeConfirm(val) {
			if (val === "") {
				tools.easyToast("请输入兑换码！");
				return;
			}
			this.RedemptionCodeVal = val;

			let res = await api.getExchangeVerificationCodenew({
				code: val
			});
			this.$refs.RedemptionCode.close();
		},
		// 监听登录弹出层显示
		changeLoginDialogShow(val) {
			this.LoginDialogShow = val;
		},
		// 登陆成功数据刷新
		loginDialogShowSucc() {
			this.initNewUserDialogShow();
			this.initHottopList();
			if (this.footerBarListAc == 2) {
				this.getUserVipStatus();
				this.getSelectauditlist();
			}
			if (this.footerBarListAc == 3) {
				console.log("登陆成功数据刷新,footerBarListAc == 3");
				this.initUserData();
				this.getUserVipStatus();
				this.getUserVideo();
				this.getUserDraft();
				this.postAndioselectApi({
					typeId: 0
				});
				this.postAndioselectApi({
					typeId: 1
				});
			}
		},

		// 前往购买页面
		toBuyPage() {
			if (this.companyName != "言影") return;
			let systemInfo = this.systemInfo;
			this.$refs.buyPopup.close();
			if (systemInfo.platform === "ios" || (systemInfo.system && systemInfo.system.includes("OS"))) {
				this.toContactUs("购买vip");
			} else {
				this.toPage("/pages/buy/buy");
			}
		},
		// 监听屏幕大小变化
		handleWindowResize() {
			let reSizeFn = "onKeyboardHeightChange"; //onWindowResize,onKeyboardHeightChange
			let that = this;
			let _this = null;
			uni[reSizeFn](async (res) => {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				console.log("监听屏幕大小变化", { res, page });
				if (!page.route.includes("pages/index/index")) {
					_this = page.$vm;
				} else {
					_this = that;
				}
				if (_this.keyboardLock) return;
				if (res.height != 0) {
					_this.keyboardH = res.height;
					_this.webStyle.height = `${_this.systemInfo.windowHeight - _this.keyboardH}px`;
				} else {
					_this.keyboardH = 0;
					_this.webStyle.height = `${_this.systemInfo.windowHeight}px`;
				}
				// if (res.size.windowHeight < this.systemInfo.windowHeight) {
				// 	this.keyboardH = this.systemInfo.windowHeight - res.size.windowHeight;
				// 	this.webStyle.height = `${res.size.windowHeight}px`;
				// } else {
				// 	this.keyboardH = 0;
				// 	this.webStyle.height = `${this.systemInfo.windowHeight}px`;
				// }
			});
		},
		// shiTingCtx初始化
		initShiTingCtx() {
			if (!this.shiTingCtx) {
				this.shiTingCtx = uni.createInnerAudioContext();
				// this.shiTingCtx.obeyMuteSwitch = false;
				// this.shiTingCtx.loop = true;
				this.shiTingCtx.onPlay((res) => {
					console.log("this.shiTingCtx.onPlay", res);
					this.getUserAudioPayload1.dataList[this.getUserAudioPayload1.playInd].isPlay = true;
				});
				this.shiTingCtx.onPause((res) => {
					console.log("this.shiTingCtx.onPause", res);
					// let _ele = this.getUserAudioPayload1.dataList[this.getUserAudioPayload1.playInd];
					// if (_ele) {
					// 	_ele.isPlay = false;
					// }
				});
				this.shiTingCtx.onEnded((res) => {
					console.log("this.shiTingCtx.onEnded", res);
					let _ele = this.getUserAudioPayload1.dataList[this.getUserAudioPayload1.playInd];
					if (_ele) {
						_ele.isPlay = false;
					}
					this.getUserAudioPayload1.playInd = -1;

					this.shiTingCtx.seek(0);
				});
				this.shiTingCtx.onStop((res) => {
					console.log("this.shiTingCtx.onStop", res);
					let _ele = this.getUserAudioPayload1.dataList[this.getUserAudioPayload1.playInd];
					if (_ele) {
						_ele.isPlay = false;
					}
					this.getUserAudioPayload1.playInd = -1;

					this.shiTingCtx.seek(0);
				});
				this.shiTingCtx.onSeeking((res) => {
					console.log("this.shiTingCtx.onSeeking", this.shiTingCtx.currentTime);
				});
				this.shiTingCtx.onTimeUpdate((res) => {
					this.audioCurrentTime = this.shiTingCtx.currentTime;
					console.log("this.shiTingCtx.onTimeUpdate", this.shiTingCtx.currentTime);
				});
			}
		},
		// 音频作品试听
		shiTing(item, _index) {
			// console.log(item);
			let index = this.getUserAudioPayload1.dataList.findIndex((e) => e.id == item.id);
			if (this.getUserAudioPayload1.playInd != index) {
				if (this.getUserAudioPayload1.playInd != -1) {
					this.shiTingCtx.stop();
				}
				setTimeout(() => {
					this.getUserAudioPayload1.playInd = index;
					if (!this.shiTingCtx) this.initShiTingCtx();
					this.shiTingCtx.src = item.audioUrl;

					this.shiTingCtx.play();
				}, 186);
			} else {
				if (this.getUserAudioPayload1.playInd == -1) return;
				this.shiTingCtx.stop();
			}
		},

		// 随机文案
		randomCont(contList) {
			let ind = tools.randomNum(0, tools.contList.length - 1);
			this.page3content = contList[ind].text;
		},

		// 文案shiTingCtx初始化
		initShiTingContCtx() {
			if (!this.shiTingContCtx) {
				this.shiTingContCtx = uni.createInnerAudioContext();
				// this.shiTingContCtx.obeyMuteSwitch = false;
				// this.shiTingContCtx.loop = true;
				this.shiTingContCtx.onPlay((res) => {
					console.log("this.shiTingContCtx.onPlay", res, this.shiTingContCtx.obeyMuteSwitch, this.shiTingContCtx.volume);
					let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
					this.page3Btnlist2[index].text = "停止";
				});
				this.shiTingContCtx.onPause((res) => {
					console.log("this.shiTingContCtx.onPause", res);
					let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
					this.page3Btnlist2[index].text = "试听";
				});
				this.shiTingContCtx.onEnded((res) => {
					console.log("this.shiTingContCtx.onEnded", res);
					let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
					this.page3Btnlist2[index].text = "试听";
					this.shiTingContCtx.seek(0);
				});
				this.shiTingContCtx.onStop((res) => {
					console.log("this.shiTingContCtx.onStop", res);
					let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
					this.page3Btnlist2[index].text = "试听";
					this.shiTingContCtx.seek(0);
				});
				this.shiTingContCtx.onSeeking((res) => {
					console.log("this.shiTingContCtx.onSeeking", this.shiTingContCtx.currentTime);
				});
				this.shiTingContCtx.onTimeUpdate((res) => {
					console.log("this.shiTingContCtx.onTimeUpdate", this.shiTingContCtx.currentTime);
				});
				this.shiTingContCtx.onError((err) => {
					console.log("this.shiTingContCtx.onError", err);
				});
			}
		},
		// 文案试听
		async shitingCont() {
			if (!this.shiTingContCtx) this.initShiTingContCtx();
			let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
			if (this.page3Btnlist2[index].text == "请稍后") return;
			if (this.page3Btnlist2[index].text == "试听") {
				if (this.page3content.length < 6) {
					tools.easyToast("文案不足6个字!");
					return;
				}
				uni.showLoading({
					title: "请稍后..."
				});
				this.page3Btnlist2[index].text = "请稍后";
				if (this.page3contentCache != this.page3content) {
					let magicSpeakerId = this.page3AudioItem?.thirdpartyId || this.page3AudioItem?.thirdPartyId;
					let speaker = magicSpeakerId ? magicSpeakerId : "jupiter_BV406";
					let content = this.page3content.replace(/\'/g, `'\\''`);
					let sand = {
						speaker: speaker,
						text: content || "随着技术不断发展，" + this.companyName + "数字人在电商、直播、娱乐、教育、广告等领域的应用越来越广泛",
						text: content ? content : "你能看出我是AI吗？现在你看到的我其实并不是真实的我，而是我的数字分身",
						speed: this.page3speed ?? 1,
						pitch: this.page3pitch ?? 0,
						volume: this.page3volume ?? 100
					};
					console.log("sand", sand);
					let ttsRes = await api.postAudioTTS(sand);
					uni.hideLoading();
					console.log("文案试听", ttsRes);
					if (!ttsRes || !ttsRes.data || !ttsRes.data.includes("http")) {
						tools.easyToast("音频合成失败！请检查文案~");
						return;
					}
					this.shiTingSrc = ttsRes.data;
					this.shiTingContCtx.src = ttsRes.data;
					this.page3contentCache = this.page3content;

					this.$set(this.shiTingContCtx, "volume", this.page3volume * 0.01);
					this.shiTingContCtx.play();
					let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
					// this.page3Btnlist2[index].text = "停止";
				} else {
					uni.hideLoading();
					this.shiTingContCtx.src = this.shiTingSrc;
					this.shiTingContCtx.play();
				}
			} else {
				this.shiTingContCtx.stop();
				this.page3Btnlist2[index].text = "试听";
			}
		},
		// AudioContext初始化
		initAudioContext() {
			if (!this.audioContext) {
				this.audioContext = uni.createInnerAudioContext();
				// this.audioContext.obeyMuteSwitch = false;

				// this.audioContext.loop = true;
				this.audioContext.onPlay((res) => {
					this.audioPlaying = true;
					console.log("this.audioContext.onPlay", res);
				});
				this.audioContext.onPause((res) => {
					this.audioPlaying = false;
					console.log("this.audioContext.onPause", res);
				});
				this.audioContext.onEnded((res) => {
					this.audioPlaying = false;
					this.audioContext.seek(0);
					this.audioCurrentTime = 0;
					console.log("this.audioContext.onEnded", res);
				});
				this.audioContext.onStop((res) => {
					this.audioPlaying = false;
					this.audioContext.seek(0);
					this.audioCurrentTime = 0;
					console.log("this.audioContext.onStop", res);
				});
				this.audioContext.onSeeking((res) => {
					console.log("this.audioContext.onSeeking", this.audioContext.currentTime);
				});
				this.audioContext.onError((err) => {
					console.log("this.audioContext.onError", err, this.audioContext.currentTime);
				});
				this.audioContext.onTimeUpdate((res) => {
					this.audioCurrentTime = this.audioContext.currentTime;
					console.log("this.audioContext.onTimeUpdate", this.audioContext.currentTime);
				});
			}
		},
		// 删除音频驱动
		delRecordingSrc() {
			this.page3AudioSrc = "";
			if (this.audioPlaying) {
				this.audioContext.stop();
			}
			this.audioDuration = 0;
		},
		// 播放音频驱动
		onPlayTap() {
			if (!this.audioPlaying) {
				this.audioContext.play();
			} else {
				this.audioContext.pause();
			}
		},
		// 添加音频驱动
		page3AddAudioSrc(payload) {
			this.page3AudioSrc = payload.src;
			this.audioContext.src = payload.src;
			this.audioDuration = payload.duration;
		},
		// page3跳转AI文案
		async page3toAICont() {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				userInfo = JSON.parse(userInfo);
				if (!userInfo.vipName) {
					if (this.companyName == "言影") {
						this.$refs.buyPopup2.open();
					} else {
						tools.easyToast("开通会员畅享AI爆款文案无限制作");
					}
					return;
				}
			}
			uni.setStorageSync("AIContInfo", {
				toPage: "index/2"
			});
			uni.setStorageSync("AIContMenuInfo", {
				leftDataInd: 3,
				rightDataInd: 0
			});
			this.toPage("/pages/AIContMenu/AIContMenu");
		},
		// 跳转爆款视频翻拍
		async toBigBreakPage() {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			uni.setStorageSync("AIContInfo", {
				toPage: "index/2"
			});
			// this.shiTingContCtx?.stop();
			this.toPage("/pages/bigBreak/bigBreak");
		},
		// page3切换数字人驱动类型
		changePage3Btnlist1Ind(index) {
			if (this.shiTingContCtx) {
				this.shiTingContCtx.stop();
				this.shiTingContCtx.destroy();
				this.shiTingContCtx = null;
			}
			if (this.audioPlaying) {
				this.audioContext.stop();
				this.audioContext.destroy();
				this.audioContext = null;
				this.audioCurrentTime = 0;
			}
			let indexs = this.page3Btnlist2.findIndex((e) => e.id == 5);
			this.page3Btnlist2[indexs].text = "试听";
			this.page3Btnlist1Ind = index;
		},
		// 点击page3底部按钮
		page3Btnlist2Tap(item, args = []) {
			let fnName = item.fnName;
			if (fnName && this[fnName] && typeof this[fnName] === "function") {
				this[fnName](...args);
			}
		},
		// 监听Page3LuYin弹出框显示
		changePage3LuYinShow(e) {
			this.page3LuYinShow = e.show;
		},
		// 选择发音人弹框
		changePage3popupShow(e) {
			if (this.shiTingContCtx) {
				this.shiTingContCtx.stop();
			}
			let index = this.page3Btnlist2.findIndex((e) => e.id == 5);
			this.page3Btnlist2[index].text = "试听";
			this.page3popupShow = e.show;
		},
		// 修改音量
		changePage3Volume(val) {
			this.page3volume = val;
			this.page3contentCache = null;
		},
		// 修改语速
		changePage3Speed(val) {
			this.page3contentCache = null;
			this.page3speed = val;
		},
		// 修改语调
		changePage3Pitch(val) {
			this.page3contentCache = null;
			this.page3pitch = val;
		},
		// 选择发音人
		pickPage3Speaker({ item, index }) {
			this.page3AudioItem = item;
			this.page3contentCache = null;
		},
		// 删除发音人
		removePage3Speaker() {
			this.page3AudioItem = {};
			this.page3contentCache = null;
		},
		// 获取音频人
		async getPage3AudioList() {},

		// 监听Page3Swiper位置发生改变
		page3SwiperTransition_wx(event) {
			// #ifdef MP-WEIXIN
			this.page3SwiperTransition(event);
			// #endif
		},
		// 监听Page3Swiper位置发生改变
		page3SwiperTransition_web(event) {
			// #ifdef H5
			this.page3SwiperTransition(event);
			// #endif
		},
		// 监听Page3Swiper位置发生改变
		page3SwiperTransition(event) {
			let dx = event.detail.dx;
			let total = this.systemInfo.windowWidth - this.page3SwiperOffset * 2;
			let progress = (dx / total).toFixed(2);
			let val = Math.abs((98 - 86) * progress);
			if (this.page3SwiperCurrH == val) return;
			this.page3SwiperCurrH = val;
		},
		// 切换page3数字人
		async changePage3SwiperCurrInd(event) {
			//event.detail = {current: current, source: source}
			this.page3SwiperCurrH = 0;
			if (this.page3SwiperCurrInd == event.detail.current) return;
			this.page3SwiperCurrInd = event.detail.current;
			if (this.page3SwiperCurrInd == this.page3DataList.length) return;

			let page3DataItem = this.page3DataList[this.page3SwiperCurrInd];
			if (!page3DataItem?.uuid) {
				tools.easyToast("此数字人无法生成视频！");
				return;
			}
			if (!this.page3AvatarData) {
				this.page3AvatarData = await api.getQmsUserHumanModelByMyself({
					size: 9999,
					current: 1
				});
			}
			let AvatarData = this.page3AvatarData;
			if (!AvatarData.data?.records) {
				this.page3AvatarData = false;
				tools.easyToast("此数字人无法生成视频！");
				return;
			}

			let AvatarItem = AvatarData.data.records.find((e) => {
				return e.speakerId == page3DataItem.uuid;
			});
			console.log("此数字人", AvatarItem);
			if (!AvatarItem) {
				tools.easyToast("此数字人无法生成视频！");
				return;
			}
			if (AvatarItem.humanBindAudioVo) {
				let item = {
					...AvatarItem.humanBindAudioVo,
					...AvatarItem.humanBindAudioVo.dubVo,
					picSrc: AvatarItem.humanBindAudioVo.headerImg,
					duration: 0,
					durationStr: "00:00"
				};
				this.pickPage3Speaker({ item });
			}
		},
		// page3刷新
		page3Redata() {
			uni.showLoading({
				title: "请稍后"
			});
			this.pageShow = false;
			this.loginDialogShowSucc();
			setTimeout(() => {
				uni.hideLoading();
				tools.easyToast("已刷新");
				this.pageShow = true;
			}, 688);
		},
		// page3提交
		async page3Submit() {
			if (this.page3SwiperCurrInd == this.page3DataList.length) return;
			let page3DataItem = this.page3DataList[this.page3SwiperCurrInd];

			let AvatarItem = null;
			uni.showLoading({
				title: "请稍后"
			});
			let shiTingContCtxSrc = "";
			if (this.shiTingContCtx) {
				shiTingContCtxSrc = this.shiTingContCtx.src;
				this.shiTingContCtx.stop();
				this.shiTingContCtx.destroy();
				this.shiTingContCtx = null;
			}
			if (this.audioPlaying) {
				this.audioContext.stop();
				this.audioContext.destroy();
			}

			let AvatarData = await api.getQmsUserHumanModelByMyself({
				size: 9999,
				current: 1
			});
			uni.hideLoading();
			if (!AvatarData?.data?.records) {
				tools.easyToast("合成失败，请重试！\r\n code:101");
				return;
			}
			AvatarItem = AvatarData.data.records.find((e) => {
				return e.speakerId == page3DataItem.uuid;
			});
			if (!AvatarItem) {
				tools.easyToast("此数字人无法生成视频！");
				return;
			}
			// console.log(AvatarItem);
			// 获取视频名称
			let videoName = "未命名项目";
			let detailList = [];
			let stopTime = 0;
			if (this.page3Btnlist1Ind == 0) {
				//文本驱动
				// if (!this.page3content) {
				// 	tools.easyToast("请输入文案");
				// 	return;
				// }
				if (this.page3content.length < 6) {
					tools.easyToast("文案不足6个字!");
					return;
				}
				let ttsRes = null;
				let content = this.page3content.replace(/\'/g, `'\\''`);
				let magicSpeakerId = this.page3AudioItem?.thirdpartyId || this.page3AudioItem?.thirdPartyId;
				let speaker = magicSpeakerId ? magicSpeakerId : "jupiter_BV406";
				console.log("文案生成", shiTingContCtxSrc);
				if (!shiTingContCtxSrc || this.page3contentCache != this.page3content) {
					uni.showLoading({
						title: "请稍后"
					});
					let send = {
						speaker: speaker,
						text: content,
						speed: this.page3speed ?? 1,
						pitch: this.page3pitch ?? 0,
						volume: this.page3volume ?? 100
					};
					console.log(send);
					ttsRes = await api.postAudioTTS(send);
					uni.hideLoading();
				} else {
					ttsRes = {
						data: shiTingContCtxSrc
					};
				}

				if (!ttsRes || !ttsRes.data || !ttsRes.data.includes("http")) {
					tools.easyToast("音频合成失败！请检查文案~");
					return;
				}
				// stopTime = await tools.setVideoSrc(ttsRes.data);

				uni.showLoading({
					title: "请稍后"
				});
				// stopTime = await new Promise((res) => {
				// 	let AudioContext = uni.createInnerAudioContext();
				// 	AudioContext.autoplay = true;
				// 	AudioContext.volume = 0;
				// 	AudioContext.src = ttsRes.data;
				// 	let intervalID = setInterval(() => {
				// 		if (AudioContext.duration !== 0) {
				// 			if (!AudioContext.paused) {
				// 				AudioContext.pause();
				// 			}
				// 			res(AudioContext.duration);
				// 			clearInterval(intervalID);
				// 		}
				// 	}, 500);
				// });
				stopTime = await new Promise(async (res) => {
					let time = await api.getDuration({
						lca: ttsRes.data
					});
					console.log("page3提交-stopTime", time);
					if (!time || !time.data) res(false);
					res(time.data / 1000);
				});
				uni.hideLoading();
				if (!stopTime) {
					tools.easyToast("音频合成失败！请检查文案~");
					return;
				}
				detailList.push({
					content: content,
					contentType: "text",
					magicSpeakerId: speaker,
					speed: this.page3speed ?? 1,
					pitch: this.page3pitch ?? 0,
					wetaSpeakerId: ttsRes.data,
					// volume: this.page3volume ?? 100,
					audioType: 0
				});
			} else if (this.page3Btnlist1Ind == 1) {
				//音频驱动
				if (!this.page3AudioSrc) {
					tools.easyToast("暂无音频!");
					return;
				}
				detailList.push({
					content: this.page3AudioSrc,
					contentType: "audio",
					wetaSpeakerId: this.page3AudioSrc
				});
				stopTime = this.audioDuration;
			}

			let detailListItem = {};
			detailListItem.contentType = "avatar";
			detailListItem.startTime = 0;
			detailListItem.stopTime = stopTime * 1000;
			detailListItem.wetaSpeakerId = AvatarItem.id;
			detailListItem.volume = this.page3volume ?? 100;
			detailListItem.content = AvatarItem.speakerId;
			detailListItem.italic = "Y";
			detailListItem.x = 0;
			detailListItem.y = 0;
			detailListItem.width = 1082;
			detailListItem.height = 1922;
			detailListItem.sortNum = 1;
			detailListItem.fontType = AvatarItem.liveAction == 1 ? "action" : "";

			console.log("AvatarItem.lsLocalhost", AvatarItem.lsLocalhost);
			if (AvatarItem.lsLocalhost == 1) {
				detailListItem.driverType = "l_hm";
			}
			if (AvatarItem.lsLocalhost == 2) {
				detailListItem.driverType = "l_hmd";
			}
			detailList.push(detailListItem);
			let coverUrl = page3DataItem.imageUrl || "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2023-12-30/598c4b44-6b09思维认知封面2.png";
			let sand = {
				height: 1920,
				name: videoName,
				width: 1080,
				coverUrl: coverUrl,
				items: [{ detailList }],
				videoExpedite: 1
			};
			console.log(JSON.stringify(sand));
			uni.showLoading({
				title: "请稍后"
			});
			let res = await api.postVideoCompound3(sand);
			uni.hideLoading();
			if (!res) return;
			let waitTime = 1500;
			await tools.easyToast("导出成功！", "success");
			uni.setStorageSync("toHome", {
				footerBarListAc: 3
			});
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}, waitTime);
		},
		// page3文案失焦
		page3contentBlur() {
			this.keyboardH = 0;
			console.log("文案失焦");
		},
		// page3文案点击
		page3textareaTap() {
			this.keyboardH = 1;
			console.log("文案点击");
		},
		// page3文案改变
		page3contentWatch_web(e) {
			// #ifndef MP-WEIXIN
			this.page3contentWatch(e);
			// #endif
		},
		// page3文案改变
		page3contentWatch_wx(e) {
			// #ifdef MP-WEIXIN
			this.page3contentWatch(e);
			// #endif
		},
		// page3文案改变
		page3contentWatch(e) {
			if (page3contentWatchTimer) {
				clearTimeout(page3contentWatchTimer);
			}
			page3contentWatchTimer = setTimeout(() => {
				this.page3content = e.detail.value;
				console.log("page3文案改变", this.page3content);
			}, 688);
		},
		// page3文案聚焦
		page3contentFocus() {
			console.log("文案聚焦");
		},

		// 关闭新人优惠弹框
		closeNewUserDialogShow() {
			let index = this.footerBarList.findIndex((e) => e.ac == 2);
			this.changeFooterBarListAc({
				item: this.footerBarList[index],
				index
			});
			this.newUserDialogShow = false;
		},

		// 初始化新人优惠
		initNewUserDialogShow() {
			let newUserDialogShow = uni.getStorageSync("changeNewUserDialogShow");
			if (newUserDialogShow) {
				this.newUserDialogShow = uni.getStorageSync("changeNewUserDialogShow");
				uni.removeStorageSync("changeNewUserDialogShow");
			}
		},
		// 获取用户会员
		async getUserVipStatus() {
			const res3 = await api.getUserVipStatus();
			if (!res3) return;
			let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			let resData = res3.data;
			userInfo.vipName = resData[resData.length - 1]?.memberName;
			userInfo.vipTime = resData[resData.length - 1]?.finalTime;
			userInfo.vipId = resData[resData.length - 1]?.memberType;
			userInfo.vipIds = res3.data.map((e) => e.memberType);
			// userInfo.vipIds = [
			//     "1732410233318158337",
			//     "1738862163041185793"
			// ]

			//终端个人详情页
			const res = await api.getHomeDetailInfo();
			if (!res) return;
			userInfo.detailInfo = res.data;
			userInfo.goldNum = res.data.rightList.find((e) => e.rightsName == "金币" || e.id == "1741564651566090455")?.totalRightBalance ?? 0;
			userInfo.detailInfoRightList = res.data.rightList.map((e) => {
				switch (e.id) {
					// "短视频时长"
					case "1":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "直播合成时长"
					case "1710556060574937089":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "金币"
					case "1741564651566090455":
						e.totalRightBalance += "个";
						break;
					// ""
					default:
						e.totalRightBalance += "次";
						break;
				}
				return e;
			});
			uni.setStorageSync("userInfo", JSON.stringify(userInfo));
			this.initUserInfo();
		},
		//终端个人详情页
		getHomeDetailInfoApi() {
			api.getHomeDetailInfo().then((res) => {
				if (!res) return;
				if (!res.data) res.data = {};
				// this.userInfo = { ...this.userInfo, ...res.data };
				this.inviteLink = res.data.inviteUrl;
				this.rightList = res.data.rightList;
				this.myPage_sub3.duanshipinInfo.youxiaoqi = res.data.totalMember[0]?.finalTime || "";
				this.myPage_sub3.twoDhuiyuanInfo.youxiaoqi = res.data.totalMember[1]?.finalTime || "";
				// this.myPage_sub3.duanshipinInfo.dataList1[0].num = (+res.data.rightList[0].totalProject);
				this.myPage_sub3.duanshipinInfo.dataList1[1].num = +res.data /* .rightList[0] */.videoValidCount;
				// 下标
				let duanshipinIndex = this.rightList.findIndex((e) => e.id == "1");
				let zhiboIndex = this.rightList.findIndex((e) => e.id == "1710556060574937089");
				let xingxiangkelongbiaoIndex = this.rightList.findIndex((e) => e.id == "1728692276125716481");
				let shengyinkelongbiaoIndex = this.rightList.findIndex((e) => e.id == "1728692348020281345");
				let AIhuihuaIndex = this.rightList.findIndex((e) => e.id == "1728692387216052226");
				let AIchengpianIndex = this.rightList.findIndex((e) => e.id == "1728692708826894338");
				let shipinfanyiIndex = this.rightList.findIndex((e) => e.id == "1728692760009986050");
				let wenanshengchengIndex = this.rightList.findIndex((e) => e.id == "1728692821095829506");
				let AIbianshengIndex = this.rightList.findIndex((e) => e.id == "1728693101979979777");
				let shuzimingpianIndex = this.rightList.findIndex((e) => e.id == "1732390268477263873");
				let xingxiangkelongIndex = this.rightList.findIndex((e) => e.id == "1735586161909239809");
				let shengyinkelongIndex = this.rightList.findIndex((e) => e.id == "1735586256058781698");
				let jinbiIndex = this.rightList.findIndex((e) => e.id == "1741564651566090455");
				this.myPage_sub3.duanshipinInfo.dataList1[0].num = this.seconds2Time(res.data.rightList[duanshipinIndex].totalRightBalance / 1000) || 0;
				this.myPage_sub3.twoDhuiyuanInfo.dataList1[1].num = +res.data.rightList[zhiboIndex].totalProject;
				this.myPage_sub3.twoDhuiyuanInfo.dataList1[0].num = this.seconds2Time(res.data.rightList[zhiboIndex].totalRightBalance / 1000) || 0;
				this.myPage_sub1_top1.list[0].num = res.data.rightList[jinbiIndex].totalRightBalance;
				this.myPage_sub1_top1.list[0].tips = `约${(((this.myPage_sub1_top1.list[0].num / this.getVirtualcoinrationData[0].proportionSource / this.getVirtualcoinrationData[0].proportionTarget) * 1000) / 60).toFixed(1)}分钟视频`;
				this.myPage_sub1_top1.list[1].num = this.seconds2Time(res.data.rightList[zhiboIndex].totalRightBalance) || 0;

				this.myPage_sub3.duanshipinInfo.dataList1[0].title = res.data.rightList[duanshipinIndex].rightsName;
				this.myPage_sub3.twoDhuiyuanInfo.dataList1[0].title = res.data.rightList[zhiboIndex].rightsName;
				this.myPage_sub3.b_dataList[0].text = res.data.rightList[2].rightsName;
				this.myPage_sub3.b_dataList[1].text = res.data.rightList[3].rightsName;
				this.myPage_sub3.b_dataList[2].text = res.data.rightList[8].rightsName;
				this.myPage_sub3.b_dataList[3].text = res.data.rightList[9].rightsName;
				this.myPage_sub3.b_dataList[4].text = res.data.rightList[4].rightsName;
				this.myPage_sub3.b_dataList[5].text = res.data.rightList[5].rightsName;
				this.myPage_sub3.b_dataList[6].text = res.data.rightList[6].rightsName;
				this.myPage_sub3.b_dataList[7].text = res.data.rightList[7].rightsName;

				this.myPage_sub3.b_dataList[0].num = res.data.rightList[2].totalRightBalance;
				this.myPage_sub3.b_dataList[1].num = res.data.rightList[3].totalRightBalance;
				this.myPage_sub3.b_dataList[2].num = res.data.rightList[8].totalRightBalance;
				this.myPage_sub3.b_dataList[3].num = res.data.rightList[9].totalRightBalance;
				this.myPage_sub3.b_dataList[4].num = "未开放";
				this.myPage_sub3.b_dataList[5].num = "未开放";
				this.myPage_sub3.b_dataList[6].num = "未开放";
				this.myPage_sub3.b_dataList[7].num = "未开放";
				this.getVirtualcoinrationAllApi();
			});
			api.getUserinternalstorage().then((res) => {
				if (!res) return;
				if (!res.data) res.data = {};
				this.myPage_sub3.duanshipinInfo.dataList1[2].num = `${(res.data.totalStorage - res.data.useStorage).toFixed(2)}${res.data.unit || "GB"}`;
			});
		},
		//获取所有 权益：金币 比例
		getVirtualcoinrationAllApi() {
			return api.getVirtualcoinrationAll().then((res) => {
				if (!res) return;
				// console.log('获取所有 权益：金币 比例', res);
				let goldNum = this.myPage_sub1_top1.list[0].num;
				this.getVirtualcoinrationData = res.data;
				// console.log(goldNum, res.data[0].proportionSource, res.data[0].proportionTarget);
				this.myPage_sub1_top1.list[4].num = (((goldNum / res.data[0].proportionSource / res.data[0].proportionTarget) * 1000) / 60).toFixed(2);
				this.myPage_sub1_top1.list[5].num = (((goldNum / res.data[1].proportionSource / res.data[1].proportionTarget) * 1000) / 60).toFixed(2);
				this.myPage_sub1_top1.list[6].num = Math.floor(goldNum / res.data[4].proportionSource / res.data[4].proportionTarget);
				this.myPage_sub1_top1.list[7].num = Math.floor(goldNum / res.data[6].proportionSource / res.data[6].proportionTarget);
				this.myPage_sub1_top1.list[8].num = Math.floor(goldNum / res.data[2].proportionSource / res.data[2].proportionTarget);
				this.myPage_sub1_top1.list[9].num = Math.floor(goldNum / res.data[3].proportionSource / res.data[3].proportionTarget);
				this.myPage_sub1_top1.list[10].num = Math.floor(goldNum / res.data[7].proportionSource / res.data[7].proportionTarget);

				this.myPage_sub1_top1.list[4].unit = `分钟`;
				this.myPage_sub1_top1.list[5].unit = `分钟`;
				this.myPage_sub1_top1.list[6].unit = `次`;
				this.myPage_sub1_top1.list[7].unit = `次`;
				this.myPage_sub1_top1.list[8].unit = `次`;
				this.myPage_sub1_top1.list[9].unit = `次`;
				this.myPage_sub1_top1.list[10].unit = `次`;
				this.userInfo.goldNum = this.myPage_sub1_top1.list[0].num;
				return res.data;
			});
		},
		// 登出
		loginOut(payload) {
			uni.showModal({
				title: "是否退出登录？",
				success: function (res) {
					if (res.confirm) {
						uni.removeStorageSync("token");
						uni.removeStorageSync("userInfo");
						uni.reLaunch({
							url: "/pages/index/index"
						});
					}
				}
			});
		},
		//判断登录
		async isLogin() {
			if (!this.userInfo.token) {
				let res = await api.getSelectauditlist();
				return !!res;
			} else {
				return true;
			}
		},
		// 打开配音弹框
		openPage3popup() {
			this.$refs.page3popup.open();
		},
		// 跳转模特制作页
		async toMakeAvatar() {
			let loginFlag = await this.isLogin();
			console.log(loginFlag);
			if (!loginFlag) return;
			if (
				!this.userInfo.detailInfoRightList.reduce((p, e) => {
					if (["1728692276125716481", "1728692348020281345"].includes(e.id)) {
						p = p + parseFloat(e.totalRightBalance);
					}
					return p;
				}, 0)
			) {
				this.$refs.buyPopup.open();
				return;
			}
			this.toPage("/pages/MakeAvatar/MakeAvatar");
		},
		// 跳转AI文案
		async toAICont() {
			// this.shiTingContCtx?.stop();
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				userInfo = JSON.parse(userInfo);
				if (!userInfo.vipName) {
					if (this.companyName == "言影") {
						this.$refs.buyPopup2.open();
					} else {
						tools.easyToast("开通会员畅享AI爆款文案无限制作！");
					}
					return;
				}
			}
			uni.setStorageSync("AIContInfo", {
				toPage: "index/2"
			});
			uni.setStorageSync("AIContMenuInfo", {
				leftDataInd: 3,
				rightDataInd: 0
			});
			this.toPage("/pages/AIContMenu/AIContMenu");
		},

		// 跳转热点文案
		toHotspotPage() {
			this.shiTingContCtx?.stop();
			uni.setStorageSync("createContInfo", {
				toPage: "index/2"
			});
			this.toPage("/pages/hotspot/hotspot");
		},
		// 跳转生成文案
		async toCreateCont(item, index) {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			uni.setStorageSync("createContInfo", {
				sourceId: item.id,
				h1_text: item.title,
				toPage: "index/2"
			});
			this.toPage("/pages/createCont/createCont");
		},
		// 跳转联系我们页面
		toContactUs(type) {
			uni.setStorageSync("ContactUs", { type });
			this.toPage("/pages/ContactUs/ContactUs");
		},
		// 关闭尺寸弹框
		closeSelectChicunShow() {
			this.selectChicunShow = false;
		},
		// 创建视频
		async createVideo() {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			uni.setStorageSync("chicun", {
				id: this.chicunList[this.chicunInd].id,
				index: this.chicunInd,
				updateType: "ChiCun"
			});
			this.toPage("/pages/createVideo/createVideo");
		},
		// 选择尺寸
		selectChicunAc(item, index) {
			this.chicunInd = index;
		},
		// 打开尺寸弹框
		openSelectChicunShow() {
			this.selectChicunShow = true;
		},
		// 点击topList元素
		async topItemTapFN(item, index) {
			if ([1, 5].includes(item.id)) {
				let loginFlag = await this.isLogin();
				if (!loginFlag) return;
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo) {
					userInfo = JSON.parse(userInfo);
					if (!userInfo.vipName) {
						if (this.companyName == "言影") {
							this.$refs.buyPopup2.open();
						} else {
							tools.easyToast("请先购买会员！");
						}
						return;
					}
				}
				uni.setStorageSync("AIContInfo", {
					toPage: "index/2"
				});
				uni.setStorageSync("AIContMenuInfo", {
					leftDataInd: 3,
					rightDataInd: 0
				});

				this.toPage("/pages/AIContMenu/AIContMenu");
			} else if (item.path == "/pages/AIContMenu/AIContMenu") {
				let loginFlag = await this.isLogin();
				if (!loginFlag) return;
				this.toPage(item.path);
			} else if (item.path) {
				this.toPage(item.path);
			} else {
				tools.easyToast("暂未开放！");
			}
		},
		//page2导航栏初始化
		initTabbarListIn2() {
			this.tabbarListIn2 = [
				{
					text: "分身数字人",
					id: 1,
					tips: "获取更多定制数字人席位",
					cont: "前往获取"
				},
				{
					text: "照片数字人",
					id: 2,
					tips: "添加自己的照片数字人",
					cont: "添加数字人"
				},
				{
					text: "定制声音",
					id: 3,
					tips: "您还没有定制的声音",
					cont: "我要定制"
				}
			].map((e, i, s) => {
				let p = (i / (s.length - 1)) * 100;
				return {
					...e,
					style: {
						left: `${p}%`,
						transform: `translateX(-${p}%)`,
						width: `${100 / s.length}%`
					},
					picStyle:
						i == 2
							? {
									width: `68%`,
									marginTop: `36vw`
							  }
							: {
									width: `86%`,
									marginTop: `0vw`
							  },
					pic: `index/page2pic${e.id}.png`
				};
			});
			this.tabbarListIn2CurItem = this.tabbarListIn2[0];
		},
		//切换ClassificationInd
		changeClassificationInd(item, index) {
			this.classificationInd = index;
			this.matDataCurrentPage = 1;
			this.waterfallsFlowRefShow = false;
			this.initMatData(this.classification[this.classificationInd]?.id);
		},
		//获取app用户数字人
		async getSelectauditlist() {
			let res = await api.getSelectauditlist();
			if (!res) return;
			this.page3DataList = res.data;
			this.page3AvatarData = await api.getQmsUserHumanModelByMyself({
				size: 9999,
				current: 1
			});
		},
		//切换FooterBarAc
		changeFooterBarListAc({ item, index }) {
			let indexs = this.page3Btnlist2.findIndex((e) => e.id == 5);
			this.page3Btnlist2[indexs].text = "试听";
			if (this.getUserAudioPayload1?.playInd != -1) {
				if (this.shiTingCtx) {
					this.shiTingCtx.stop();
				} else {
					this.initShiTingCtx();
				}
			}
			if (this.shiTingContCtx) {
				this.shiTingContCtx.stop();
				this.shiTingContCtx.destroy();
				this.shiTingContCtx = null;
			} else {
				this.initShiTingContCtx();
			}
			if (this.audioPlaying) {
				this.audioContext.stop();
				this.audioCurrentTime = 0;
			} else {
				this.initAudioContext();
			}
			this.footerBarListAc = item.ac;
			if (this.footerBarListAc == 2) {
				this.getSelectauditlist();
				this.getUserVipStatus();
			}
			if (this.footerBarListAc == 3) {
				this.initUserData();
				// this.getUserVideoPayload.currentPage++;
				this.getUserVideo();
				this.getUserDraft();
				this.postAndioselectApi({
					typeId: 0
				});
				this.postAndioselectApi({
					typeId: 1
				});
				this.getUserVipStatus();
			}
			// #ifndef MP-WEIXIN
			// this.$refs.userVideoListRef?.refresh();
			// this.$refs.userDraftRef?.refresh();
			this.$refs.waterfallsFlowRef?.refresh();
			// #endif
		},
		//切换Page4FilterAc
		changePage4FilterAc(item, index) {
			this.page4FilterAc = index;
			// #ifndef MP-WEIXIN
			this.$refs.userVideoListRef?.refresh();
			this.$refs.userDraftRef?.refresh();
			this.$refs.waterfallsFlowRef?.refresh();
			// #endif
		},
		//切换Page2TabbarAc
		changePage2TabbarAc(item, index) {
			this.page2TabbarAc = index;
			// #ifndef MP-WEIXIN
			this.$nextTick(() => {
				switch (index) {
					case 0:
						this.$refs.userVideoListRef?.refresh();
						break;
					case 1:
						this.$refs.userDraftRef?.refresh();
						break;
				}
			});
			// #endif
		},
		initUserData() {
			this.getUserAudioPayload0 = {
				currentPage: 1,
				pageSize: 999,
				total: 0,
				dataList: []
			};

			this.getUserAudioPayload1 = {
				currentPage: 1,
				pageSize: 999,
				total: 0,
				dataList: []
			};

			this.getUserDraftPayload = {
				currentPage: 1,
				pageSize: 999,
				total: 0
			};
			this.userDraft = [];

			this.getUserVideoPayload = {
				currentPage: 1,
				pageSize: 10,
				total: 0
			};
			this.userVideoList = [];
		},

		// 请求草稿数据
		async getUserDraft() {
			if (this.userDraft.length != 0) return;
			let res = await api.getSelectMyselfUserBindDraft({
				currentPage: this.getUserDraftPayload.currentPage,
				pageSize: this.getUserDraftPayload.pageSize
			});
			if (!res) return;
			this.userDraft = [...this.userDraft, ...res.data.source].map((e) => {
				return {
					...e,
					image: e.draftUrl,
					hide: true
				};
			});
			this.getUserDraftPayload.total = res.data.totalSource;
		},
		// 请求作品数据
		async getUserVideo() {
			// if (this.userVideoList.length != 0) {
			// 	this.userVideoList.some((e) => {
			// 		if (!e.videoStatus && e.schedule != 100) {
			// 			this.getUserLoop(e.videoId);
			// 			return true;
			// 		}
			// 	});
			// 	return;
			// }
			if (this.getUserVideoPayload.currentPage == 1) {
				this.getUserVideoPayload.reqId = tools.createID();
			}
			let res = await api.getUserVideoByPage({
				currentPage: this.getUserVideoPayload.currentPage,
				pageSize: this.getUserVideoPayload.pageSize
			});
			if (!res) return;
			this.userVideoList = [...this.userVideoList, ...res.data.source].map((e) => {
				if (!e.isReq && e.schedule != 100) {
					this.getUserLoop(e.videoId, this.getUserDraftPayload.reqId);
				}
				return {
					...e,
					image: e.coverUrl,
					isReq: true,
					hide: true
				};
			});
			this.getUserVideoPayload.total = res.data.totalSource;
		},
		// 递归获取用户视频合成进度
		getUserLoop(id, reqId) {
			// if (this.getUserDraftPayload.reqId != reqId) return;
			const that = this;
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			if (page?.route != "pages/index/index") return;
			if (this.footerBarListAc != 3) return;
			setTimeout(async () => {
				let res = await api.getListenerVideoSchedule(id);
				if (res) {
					if (res.data.videoStatus == 1 || res.data.schedule == 100) {
						let once = false;
						this.userVideoList.some((e) => {
							if (!once && !e.videoStatus && e.schedule != 100) {
								once = true;
								this.getUserLoop(e.videoId, this.getUserDraftPayload.reqId);
							}
							return once;
						});
						let resItem = await api.getUserVideoByPageOfId({ id: id });
						// this.loginDialogShowSucc();
						let index = that.userVideoList.findIndex((e) => e.videoId == id);
						const item = {
							...that.userVideoList[index],
							...resItem.data
						};
						that.$set(that.userVideoList, index, item);
					} else {
						that.getUserLoop(id, reqId);
						let index = that.userVideoList.findIndex((e) => e.videoId == id);
						that.$set(that.userVideoList[index], "schedule", res.data.schedule);
					}
				}
			}, /* tools.randomNum(1000, 2000) */ 3000);
		},
		//用户获取音频作品
		async postAndioselectApi({ typeId }) {
			let ids = typeId ?? this.page2TabbarList[this.page2TabbarAc].id;
			let payload = this[`getUserAudioPayload${ids}`];
			if (payload.dataList.length != 0) return;
			let res = await api.postAndioselect({
				totcurrentPage: payload.currentPage,
				pagesize: payload.pageSize,
				type: ids
			});
			if (!res || !res.data || !res.data.source) return;
			payload.dataList = res.data.source.map((e, i) => {
				// let duration = 0;
				// if (e.audioUrl) {//获取时长
				//     tools.setVideoSrc(e.audioUrl).then(res => {
				//         this.$set(payload.dataList[i], 'duration', res);
				//     });
				// };
				return {
					...e,
					progress: 0,
					refId: tools.createID(),
					isPlay: false,
					duration: e.duration ?? 0,
					showTime: e.updateTime || e.creationTime || createTime || "",
					image: this.imgPath + "index/audio-pic.png",
					hide: true
				};
			});
			payload.total = +res.data.totalSource;
			this.getUserAudioPayload = payload;
		},
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							that.page3SwiperOffset = Math.floor(that.systemInfo.windowWidth / 10);
							that.contactObj.size = Math.floor(that.systemInfo.windowWidth * (14.56 / 100));
							that.contactObj.prevX = that.systemInfo.windowWidth - that.contactObj.size * (2 / 3);
							that.contactObj.calcX = that.systemInfo.windowWidth - that.contactObj.size * (2 / 3);
							that.contactObj.prevY = that.systemInfo.windowHeight * (55.2 / 100);
							that.contactObj.calcY = that.systemInfo.windowHeight * (55.2 / 100);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 9.6;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 用户信息初始化
		initUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			this.userInfo.detailInfoRightList = (this.userInfo.detailInfoRightList || [])
				.filter((e) => {
					return !["AI绘画", "文案生成"].includes(e.rightsName);
				})
				.map((e) => {
					switch (e.rightsName) {
						case "AI成片":
							e.rightsDescript = "快速成片";
							break;
						case "AI变声":
							e.rightsDescript = "文本转语音";
							break;
						case "数字名片":
							e.rightsDescript = "照片说话";
							break;
					}
					return e;
				});
			// console.log(this.userInfo);
		},
		// 页面ac初始化
		initPageAc(option) {
			let data = option;
			if (!option.footerBarListAc) {
				data = uni.getStorageSync("toHome") || {};
			}
			this.footerBarListAc = data.footerBarListAc ?? 1;
			let aiCont = uni.getStorageSync("aiCont");
			if (aiCont) {
				this.page3content = aiCont.cont;
				uni.removeStorageSync("aiCont");
			}
			if (this.footerBarListAc == 2) {
				this.getSelectauditlist();
			}
			if (this.footerBarListAc == 3) {
				this.initUserData();
			}
			uni.removeStorageSync("toHome");
		},
		//page1懒加载
		waterfallsFlowRefScroll(evnet) {
			this.matDataCurrentPage++;
			this.initMatData(this.classification[this.classificationInd]?.id);
		},
		// 请求热点新闻
		async initHottopList() {
			let res = await api.getAiworkRtsNews();
			this.hottopList = res.data.slice(0, 3).map((e, i) => {
				return {
					...e,
					text: e.title,
					dot: i == 0 ? "#ff0000" : i == 1 ? "#f3ad33" : i == 2 ? "#00997f" : ""
				};
			});
		},
		//公共模板初始化
		async initMat() {
			// 获取尺寸
			let res = await api.getVideoParamete();
			if (!res) return;
			// 获取二级类型
			let classificationRes = await api.getAdminSysmatTwoType("template");
			if (!classificationRes) return;
			let tempArr = classificationRes.data.map((data) => ({ ...data, text: data.classifyName, hot: false }));
			this.classification = [...[{ id: null, text: "热门", hot: true }], ...tempArr];
			this.classificationInd = 0;
			this.matDataPageSize = 16;
			this.matDataCurrentPage = 1;
			this.initMatData(this.classification[this.classificationInd]?.id);
		},
		// 公共模板初始化
		async initMatData(id) {
			uni.showLoading({
				title: "请稍等..."
			});
			let res = null;
			if (id) {
				//请求全部
				let _res = await api.getAdminVideoSysmat({
					oneid: id,
					size: this.matDataPageSize,
					current: this.matDataCurrentPage,
					twoid: 2
				});
				if (!_res) return;
				res = _res;
			} else {
				//请求分类
				let _res = await api.getAdminVideoSysmatAll({
					type: "template",
					size: this.matDataPageSize,
					current: this.matDataCurrentPage,
					id: 2
				});
				if (!_res) return;
				res = _res;
			}
			if (!res || !res.data.records) {
				uni.hideLoading();
				return;
			}
			this.waterfallsFlowRefShow = true;
			if (this.matDataCurrentPage == 1) {
				this.matData = res.data.records.map((e) => {
					return {
						...e,
						image: e.matterValue,
						hide: true
					};
				});
			} else {
				this.matData = [
					...this.matData,
					...res.data.records.map((e) => {
						return {
							...e,
							image: e.matterValue,
							hide: true
						};
					})
				];
			}

			uni.hideLoading();
			// let data = {
			// 	type: "template",
			// 	size: 1000,
			// 	current: 1,
			// 	id: 2
			// };
			// api.getAdminVideoSysmatAll(data).then((res) => {
			// 	if (!res || !res.data.records) return;
			// 	this.matData = res.data.records.map((e) => {
			// 		return {
			// 			...e,
			// 			image: e.matterValue,
			// 			hide: true
			// 		};
			// 	});
			// });
		},
		// 客服功能监听
		handleContact(e) {
			console.log("客服功能监听");
			console.log(e.detail.path);
			console.log(e.detail.query);
		},
		//跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		//浏览视频
		changeBrowseVideoAc(item, index) {
			index = this.matData.findIndex((e) => e.id == item.id);
			this.browseVideoAc = index;
			uni.setStorageSync("browseVideo", { item: { ...item, url: item.previewVideo, myType: "Template" }, index });
			this.toPage("/pages/browseVideo/browseVideo");
			// this.browseVideoShow = true;
			// this.$nextTick(() => {
			// 	let browseVideoEl = uni.createVideoContext("browseVideoEl");
			// 	browseVideoEl.play();
			// });
		},
		//选择模板
		async pickTemplate(item, index) {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			uni.setStorageSync("template", {
				matterUrl: item.matterUrl,
				updateType: "VideoTemplate"
			});
			this.toPage("/pages/createVideo/createVideo");
		},
		//选择草稿
		async pickDraft(item, index) {
			let loginFlag = await this.isLogin();
			if (!loginFlag) return;
			uni.setStorageSync("draft", {
				draftId: item.draftId,
				updateType: "Operate"
			});
			this.toPage("/pages/createVideo/createVideo");
		},
		//查看用户视频
		seeUserVideo(item, index) {
			if (item.videoStatus == 1) return;
			if (item.schedule != 100) return;
			index = this.userVideoList.findIndex((e) => e.id == item.id);
			this.userVideoAc = index;
			uni.setStorageSync("browseVideo", { item: { ...item, url: item.videoUrlYy, myType: "UserVideo" }, index });
			this.toPage("/pages/browseVideo/browseVideo");
			// this.browseVideoShow = true;
			// this.$nextTick(() => {
			// 	let browseVideoEl = uni.createVideoContext("userVideoEl");
			// 	browseVideoEl.play();
			// });
		},
		//关闭浏览
		closeBrowseVideo() {
			this.browseVideoShow = false;
			this.browseVideoAc = -1;
			this.userVideoAc = -1;
		},
		//修改尺寸
		changechicun(val) {
			console.log("修改尺寸", val);
		}
	},
	components: {
		PickSpeaker,
		LuYin
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}

.content {
	width: 100vw;
	// height: 100vh;
	// background: rgba(7, 7, 9, 1);
	color: #fff;
	font-size: 32rpx;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.bgc {
		background: rgb(0, 16, 11);
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		top: 0vw;
		left: 0vw;
	}
	.bgi {
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		top: 0vw;
		left: 0vw;
	}

	.page1 {
		flex: 1;
		position: relative;
		overflow: auto;
		display: flex;
		flex-direction: column;

		// background: radial-gradient(rgba(3, 71, 72, 1) 0%, rgba(1, 12, 31, 1) 100%);
		.banner-box {
			width: 100%;
			height: 35vh;
			.pic-box {
				height: 35vh;
				overflow: hidden;

				.pic {
					width: 100%;
				}
			}
		}

		.top-btns {
			--br-val: 4vw;
			margin: 3vw;
			margin-top: -10vw;
			position: relative;
			z-index: 1;
			background: rgba(255, 255, 255, 0.12);
			padding: 2.2vw;
			border-radius: var(--br-val);
			backdrop-filter: blur(2vw);

			.text {
				font-weight: 500;
				letter-spacing: 0px;
				color: rgba(255, 255, 255, 1);
				font-size: 3.6vw;
			}

			.icon {
				width: 8vw;
				height: 6vw;
				margin-bottom: 1.5vw;
			}

			.t {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 30vw;

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 72vw;
					height: 30vw;
					opacity: 1;
					border-radius: var(--br-val);
					margin-right: 2vw;
					background: linear-gradient(313deg, rgba(6, 212, 184, 1) 0%, rgba(161, 240, 113, 1) 99.72%);
					.icon {
						width: 9vw;
						height: 8vw;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;

					.sub1 {
						width: 23vw;
						height: 100%;
						display: flex;
						box-sizing: border-box;
						padding-bottom: 3vw;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						opacity: 1;
						border-radius: var(--br-val);
						background: linear-gradient(38deg, #011831 0%, #02323b 50%, #2c655c 90%, #43786c 99.72%);

						.icon {
							width: 86%;
							margin-bottom: 1vw;
						}
					}
				}
			}

			.b {
				margin-top: 2vw;

				.list {
					display: -webkit-box;
					width: 100%;
					overflow: auto;

					.item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						// min-width: 28vw;
						min-width: 21.52vw;
						height: 20vw;
						opacity: 1;
						border-radius: var(--br-val);
						margin-right: 3vw;
						background: linear-gradient(223.28deg, rgba(6, 212, 184, 1) 0%, rgba(161, 240, 113, 1) 99.72%);
						box-sizing: border-box;
						padding: 0vw 3vw;

						.icon {
							margin-right: 0vw;
						}
					}
				}
			}
		}

		.hot {
			margin: 3vw;
			border-radius: 4vw;
			padding: 2.2vw;
			display: flex;
			flex-direction: column;
			background: rgba(255, 255, 255, 0.12);
			backdrop-filter: blur(2vw);

			.t {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 2vw;

				.t-l {
					font-size: 4.3vw;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

				.t-r {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0vw 3vw;
					.text {
						font-size: 3vw;
						font-weight: 400;
						color: rgba(123, 158, 149, 1);
					}

					.icon {
					}
				}
			}

			.cont {
				.list {
					.item {
						display: flex;
						align-items: center;
						margin: 6vw 0vw 3vw;

						.dot {
							width: 2vw;
							height: 2vw;
							margin-right: 2.5vw;
							border-radius: 50%;
							background: rgba(54, 85, 93, 1);
						}

						.text {
							font-size: 4.3vw;
							font-weight: 400;
							color: rgba(255, 255, 255, 1);
							width: 20em;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.page2 {
		flex: 1;
		position: relative;
		overflow: auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;

		.page2-tabbar {
			padding: 10vw 4vw 4vw;
			// height: 7vw;
			width: 100%;
			box-sizing: border-box;

			.list {
				position: relative;
				display: flex;
				width: 100%;
				height: 100%;
				border-radius: 100vw;
				background: rgba(255, 255, 255, 0.1);
				backdrop-filter: blur(14px);

				.ac {
					transition: all 0.3s;
					position: absolute;
					width: 33.3%;
					height: 100%;
					border-radius: 100vw;
					background: linear-gradient(217.51deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%);
				}

				.item {
					position: relative;
					height: 100%;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 8.6vw;
					font-size: 3vw;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		.page2-pic {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tips {
				width: max-content;
				position: absolute;
				bottom: 15vw;
				font-size: 3vw;
				font-weight: 400;
				color: rgba(237, 253, 255, 1);
			}
		}

		.page2-text {
			width: 86vw;
			padding: 1.5vw 0vw;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 700;
			color: rgba(17, 17, 19, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 2.5vw;
			background: linear-gradient(217.51deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%);
		}
	}

	.page3 {
		flex: 1;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
		.page3-top {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			margin-top: 2vw;
			.vip-pic {
				padding: 2vw;
				border-radius: 0vw 2.5vw 2.5vw 0vw;
				background: rgba(255, 255, 255, 0.168);
				.pic {
					width: 5.9vw;
					display: block;
					max-height: 6vw;
				}
			}
			.r {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.createAvatar {
				margin-right: 2vw;
				font-size: 4.5vw;
				font-weight: 700;
				color: rgba(17, 17, 19, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 2.5vw;
				padding: 2vw 4.6vw;
				background: linear-gradient(217.51deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%);
				.pic {
					width: 6vw;
					height: 6vw;
					display: block;
				}
			}
		}
		.page3-swiper {
			width: 100%;
			height: 46vh;
			box-sizing: border-box;
			margin: 2vw 0vw;
			.swiper {
				height: 100%;
				width: 100%;
				.swiper-item {
					height: 100%;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.pic-box {
						overflow: hidden;
						width: 68vw;
						height: 86%;
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-radius: 3vw;
						background: rgba(255, 255, 255, 0.08);
						border: 1px solid rgba(56, 108, 92, 1);
						backdrop-filter: blur(26px);
						box-sizing: border-box;

						.pic-view {
							width: 100%;
							overflow: hidden;
							.pic {
								width: 68vw;
								height: calc(68vw * (16 / 9));
							}
						}

						.speaker {
							position: absolute;
							background: rgba(111, 111, 111, 0.6);
							border-radius: 1.5vw;
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;
							padding: 1.5vw 2vw;
							color: #fff;
							font-size: 3vw;
							left: 2.5vw;
							top: 2.5vw;
						}
						.tips {
							width: 100%;
							position: absolute;
							bottom: 0vw;
							background: #2f3130;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;
							padding: 4.6vw 0vw;
							font-size: 3vw;

							&.style2 {
								background: rgba(0, 0, 0, 0.286);
								padding: 1.6vw 0vw;
							}
							.text1 {
								color: #fff;
								font-size: 3.5vw;
								text-align: center;
								margin-bottom: 2vw;
							}
							.text2 {
								color: rgba(255, 255, 255, 0.68);
								font-size: 3vw;
								text-align: center;
							}
						}

						.icon {
							width: 30%;
							margin-bottom: 2vw;
						}

						.text {
							color: #fff;
							font-size: 4.6vw;
							text-align: center;
						}
						.tr-tag {
							position: absolute;
							top: 0vw;
							right: 0vw;
							box-sizing: border-box;
							padding: 2vw 1.5vw;
							border-radius: 0vw 0vw 0vw 3vw;
							.tr-tag-text {
								font-size: 3.5vw;
							}
						}
					}
				}
			}
		}
		.page3-bottom {
			width: 100%;
			// height: 30vh;
			flex: 1;
			background: #0e1c18;
			display: flex;
			overflow: hidden;
			flex-direction: column;

			.page3-b-btns {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 2.5vw;
				height: 6.6vh;
				border-bottom: 1px solid rgba(34, 48, 44, 1);
				position: relative;
				.l {
					flex: 1;
					display: -webkit-box;
					justify-content: flex-end;
					box-sizing: border-box;
					max-width: 100%;
					overflow: auto;
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 2.5vw;
						padding: 0vw 2.5vw;
						background: rgba(255, 255, 255, 0.08);
						box-sizing: border-box;
						margin-right: 2vw;
						&.ac {
							background: #00997f;
						}

						.icon {
							max-width: 7vw;
							height: 7vw;
							width: 7vw;
							display: block;
							margin-right: 1vw;
						}

						.text {
							font-size: 3vw;
							color: rgba(255, 255, 255, 1);
						}
					}
				}
				.r {
					flex: 1;
					display: -webkit-box;
					justify-content: flex-end;
					box-sizing: border-box;
					max-width: 100%;
					overflow: auto;

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 2.5vw;
						padding: 3vw 2vw;
						background: rgba(255, 255, 255, 0.08);
						box-sizing: border-box;
						margin-right: 2vw;
						height: 6.8vw;
						&.ac {
							background: #00997f;
						}

						.icon {
							max-width: 7vw;
							height: 5vw;
							width: 4vw;
							display: block;
							margin-right: 1vw;
						}

						.text {
							font-size: 3.5vw;
							color: rgba(255, 255, 255, 1);
						}
					}
				}
			}

			.cont {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				.textarea-box {
					width: 100%;
					flex: 1;
					position: relative;
					padding: 2.5vw;
					padding-bottom: 0;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					.cont-textarea {
						flex: 1;
						width: 100%;
						height: 100%;
						font-size: 4.6vw;
						max-height: 250px;
						color: rgba(255, 255, 255, 1);
					}
					.number {
						position: absolute;
						border-radius: 2vw;
						padding: 1vw 1.5vw;
						color: rgba(126, 126, 126, 1);
						background: rgba(255, 255, 255, 0.086);
						right: 2vw;
						// bottom: 2vw;
					}
				}

				.cont-btns {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					padding: 2.5vw;
					box-sizing: border-box;

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 2.5vw;
						padding: 1.5vw 2.5vw;
						background: rgba(255, 255, 255, 0.08);
						box-sizing: border-box;
						margin-left: 2vw;

						.icon {
							max-width: 6vw;
							height: 86%;
							display: block;
							margin-right: 1vw;
						}

						.text {
							font-size: 4vw;
							color: rgba(255, 255, 255, 1);
						}
					}
				}

				.audio-box {
					width: 96%;
					margin: 2vw auto;
					position: relative;
					border-radius: 2.5vw;
					background: rgba(126, 126, 126, 0.168);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 2.5vw;

					.audio-cont {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						.info {
							flex: 1;
							font-size: 3.5vw;
							.name {
								color: #fff;
								margin-bottom: 1vw;
							}
							.time {
								color: rgba(255, 255, 255, 0.168);
							}
						}
						.btns {
							display: flex;
							justify-content: center;
							align-items: center;
							.item {
								width: 8.6vw;
								margin-right: 1.5vw;
								&.del {
									width: 6.8vw;
								}
								.icon {
									width: 100%;
									display: block;
								}
							}
						}
					}

					.rate-box {
						margin-top: 5vw;
						width: 100%;
					}
				}

				.showRecordView {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.icon {
						width: 8%;
						margin-bottom: 2vw;
					}

					.text {
						color: #fff;
						font-size: 3.6vw;
						text-align: center;
					}
				}
			}
		}
		.toMakeAvatar {
			position: absolute;
			left: 0vw;
			top: 35.6vw;
			width: 9.6vw;
			.pic {
				width: 100%;
			}
		}
	}

	.page4-view {
		flex: 1;
		position: relative;
		overflow: auto;
		box-sizing: border-box;
		padding: 0vw 3vw 3vw;
	}

	.page4 {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;

		.inf0 {
			display: flex;

			.left {
				width: 15vw;
				height: 15vw;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 2vw;

				.headImg {
					width: 100%;
					display: block;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.r-t {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.r-t-l {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.userName {
							max-width: 30vw;
							font-size: 3.5vw;
							font-weight: 600;
							color: rgba(51, 51, 51, 1);
							margin-right: 2vw;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.tag {
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;
							padding: 1vw 2vw;
							border-radius: 100vw;
							background: rgba(229, 229, 229, 0.5);

							.icon {
								width: 3vw;
								height: 3vw;
								display: block;
								margin-right: 1vw;
							}

							.text {
								font-size: 24rpx;
								color: rgba(242, 169, 34, 1);
							}
						}
					}

					.r-t-r {
						margin-top: 3vw;
						margin-right: 1vw;
						.more {
							width: 7vw;
							// height: 5vw;
							display: block;
						}
					}
				}

				.r-b {
					display: flex;
					justify-content: start;
					align-items: center;

					.userId {
						font-size: 3vw;
						color: rgba(166, 166, 166, 1);
					}

					.copy {
						margin-left: 2vw;
						width: 3vw;
						height: 3vw;
						display: block;
					}
				}
			}
		}

		.vip-inf0 {
			position: relative;
			width: 100%;
			margin-top: 6vw;
			display: flex;
			flex-direction: column;

			.bgi {
				position: relative;
				width: 100%;
			}

			.vip-inf0-cont {
				position: absolute;
				top: 0vw;
				left: 0vw;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 4vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.t {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.t-l {
						.t-l-t {
							width: 20vw;
							display: block;
							margin-bottom: 2vw;
						}

						.t-l-b {
							font-size: 24rpx;
							color: rgba(102, 102, 102, 1);
						}
					}

					.t-r {
						.btn {
							box-sizing: border-box;
							padding: 3vw;
							border-radius: 100vw;
							background: rgba(17, 17, 19, 1);
							display: flex;
							justify-content: center;
							align-items: center;

							.text {
								font-size: 35rpx;
								color: rgba(250, 170, 90, 1);
								display: block;
								line-height: 3vw;
							}
						}
					}
				}

				.b {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.b-l {
						font-size: 32rx;
						font-weight: 600;
						color: rgba(52, 54, 51, 1);
					}

					.b-r {
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}

		.property {
			margin: 2vw 0vw 2vw;

			.list {
				display: -webkit-box;
				overflow: auto;

				.item {
					position: relative;
					box-sizing: border-box;
					padding: 4vw 6vw 2vw 2vw;
					height: 16vw;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					overflow: hidden;
					border-radius: 3vw;

					margin-right: 2vw;

					&:nth-child(n) {
						background: rgba(240, 248, 250, 1);
					}

					&:nth-child(2n) {
						background: rgba(237, 250, 243, 1);
					}

					&:nth-child(3n) {
						background: rgba(255, 249, 235, 1);
					}

					&:nth-child(4n) {
						background: rgba(255, 235, 235, 1);
					}

					.text1 {
						font-size: 32rpx;
						line-height: 32rpx;
						color: rgba(52, 54, 51, 1);
						font-weight: bold;
					}

					.text2 {
						font-size: 20rpx;
						line-height: 20rpx;
						color: rgba(166, 166, 166, 1);
					}

					.tag {
						position: absolute;
						top: 0vw;
						right: 0vw;
						box-sizing: border-box;
						padding: 1vw 1.5vw;
						border-radius: 0vw 3vw 0vw 3vw;
						background: linear-gradient(270deg, rgba(245, 165, 54, 1) 0%, rgba(255, 213, 145, 1) 100%);
						font-size: 16rpx;
						font-weight: 500;
						line-height: 16rpx;
						color: #fff;
					}
				}
			}
		}

		.content-main {
			.tabbar-box {
				background: none;
				display: flex;
				flex-direction: column;

				.tabbar {
					margin-top: 0vw;
					margin-bottom: 2vw;
					background: #fff;
					height: 10vw;
					padding: 2vw;

					.tabbar-item {
						background: none;
						font-size: 30rpx;
						font-weight: 400;
						line-height: 36rpx;
						color: rgba(52, 54, 51, 1);

						&.ac {
							background: none;
							font-size: 36rpx;
							font-weight: 700;
						}

						&._page4 {
							margin: 0;
							padding: 0;
							margin-right: 6.8vw;
							position: relative;

							.text {
								position: relative;
							}

							.ac-v {
								position: absolute;
								width: 86%;
								height: 16%;
								border-radius: 100vw;
								background: rgba(87, 230, 220, 1);
								filter: blur(4px);
								display: none;
							}

							&.ac {
								.ac-v {
									display: block;
								}
							}
						}
					}
				}

				.filter {
					display: -webkit-box;
					margin-bottom: 2vw;

					.filter-item {
						border-radius: 100vw;
						background: rgba(229, 229, 229, 0.5);
						padding: 1vw 3vw;
						font-size: 3vw;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
						margin-right: 4vw;

						&.ac {
							background: rgba(17, 17, 19, 1);
							color: #fff;
						}
					}
				}
			}

			.page4-scroll {
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.content-list {
				padding: 0vw;
				flex: auto;
				height: max-content;
			}
		}
	}

	.content-tabbar {
		width: 100%;
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 8vw 0vw;

		.tabbar-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			vertical-align: top;
			flex-direction: column;

			&.ac {
				border-bottom: 4px solid #00997f;
			}

			.icon-box {
				width: 13vw;
				height: 13vw;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.icon {
				width: 13vw;
				height: 13vw;
				display: block;
			}
		}

		.tabbar-item:last-child {
			.icon {
				width: 10vw;
				height: 10vw;
			}
		}
	}

	.content-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		.tabbar-box {
			display: flex;
			overflow: hidden;
			position: sticky;
			top: 0vw;
			z-index: 10;
			// background: #070709;
			// background: radial-gradient(rgba(2, 34, 46, 1) 0%, rgba(2, 34, 46, 1) 100%);

			.tabbar {
				flex: 1;
				width: 100vw;
				// height: 6vw;
				display: -webkit-box;
				margin: 4vw 0vw 5vw;
				overflow: auto;

				.tabbar-item {
					width: max-content;
					padding: 1vw 3vw;
					margin: 0vw 3vw;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					font-size: 4.3vw;
					font-weight: 400;
					letter-spacing: 0px;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;
					flex-direction: column;
					border-radius: 100vw;
					background: rgba(255, 255, 255, 0.2);

					&.ac {
						// border-bottom: 4px solid #00997F;
						background: rgba(0, 153, 127, 1);
					}

					&._page1 {
						position: relative;
						.tabbar-item-hot {
							position: absolute;
							right: -9%;
							top: 5%;
							width: 25%;
							.hotPic {
								width: 100%;
								display: block;
							}
						}
					}

					.icon {
						width: 10vw;
						height: 10vw;
						display: block;
					}
				}
			}
		}

		.content-list {
			overflow: auto;
			flex: 1;
			box-sizing: border-box;
			padding: 0vw 3vw;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-around;

			.content-item {
				width: 46vw;
				// height: 79vw;
				display: flex;
				// border-radius: 3vw;
				flex-direction: column;
				overflow: hidden;
				position: relative;
				// margin: 0vw 0vw 3vw;

				.show {
					width: 100%;
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #ffffff52;
					position: relative;

					.pic {
						width: 100%;
						// height: 100%;
					}

					.loading {
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.68);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.loader {
							--loading-size: 16vw;
							width: var(--loading-size);
							height: var(--loading-size);
							margin-bottom: 8vw;
							// border: 1px solid chocolate;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							.item {
								--item-size: calc(var(--loading-size) / 4.6);
								--item-radius: 30%;
								display: block;
								width: var(--item-size);
								height: 50%;
								position: absolute;
								left: calc((100% - var(--item-size)) / 2);
								transform-origin: 50% 100%;
								.dot {
									position: absolute;
									background: #4be8b4;
									border-radius: 50%;
									width: var(--item-size);
									height: var(--item-size);
								}
								@for $i from 1 through 8 {
									&:nth-child(#{$i}) {
										transform: rotate(calc((#{$i} - 1) * 45deg));
										.dot {
											animation: loading 1s ease calc((#{$i} - 1) * 0.12s) infinite;
										}
									}
								}
							}
						}
						.loading-gif {
							width: 68%;
							width: 36%;
							margin-bottom: 3vw;
						}

						.schedule {
							text-align: center;
						}
					}

					.playView {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0vw;
						left: 0vw;
						background: rgba(0, 0, 0, 0.68);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.btns {
							display: flex;
							justify-content: center;
							align-items: center;
							.item {
								width: 16.8vw;
								margin-right: 1.5vw;
								.icon {
									width: 100%;
									display: block;
								}
							}
						}
					}
				}

				.info {
					width: 100%;
					position: absolute;
					bottom: 0px;
					left: 0px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(0deg, #000, transparent);

					.text {
						font-size: 36rpx;
					}
				}
				.err-tag {
					position: absolute;
					padding: 2.5vw;
					border-radius: 1.5vw;
					right: 0vw;
					top: 0vw;
					color: rgb(255, 255, 255);
					background: rgb(226, 9, 9);
					.text {
						font-size: 4.2vw;
					}
				}
			}

			.kong-page {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #000;
				.kpic-box {
					width: 52%;
					position: relative;
					.k-pic {
						width: 100%;
					}
					.text {
						font-size: 3vw;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 20.27px;
						color: rgba(153, 153, 153, 1);
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 10vw;
					}
				}
			}
		}
	}

	.browse-video {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0vw;
		left: 0vw;
		display: flex;
		flex-direction: column;
		z-index: 11;

		.videoEl {
			width: 100%;
			flex: 1;
		}

		.back {
			position: absolute;
			--btn-size: 10vw;
			width: var(--btn-size);
			height: var(--btn-size);
			display: block;
			top: 2vw;
			left: 2vw;

			.icon {
				width: var(--btn-size);
				height: var(--btn-size);
				display: block;
			}
		}

		.inCreateVideoBtn {
			background: rgba(0, 153, 127, 0.86);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5vw;
		}
	}

	.footer-bar {
		display: flex;
		height: 16vw;
		// background: #111111;
		overflow: auto;
		position: relative;
		z-index: 100;

		.footer-bar-item {
			flex: 1;
			// width: 22vw;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.ac {
				.text {
					color: #00997f !important;
				}
			}

			.icon {
				width: 6vw;
				height: 6vw;
				display: block;
				margin-bottom: 0;
			}
		}
	}

	.selectChicun {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: absolute;
		left: 0vw;
		right: 0vw;
		background: rgba(0, 0, 0, 0.68);
		z-index: 106;

		.close {
			top: 2vw;
			right: 2vw;
		}

		.MyDialog {
			width: 100%;
			height: 70vw;
			position: absolute;
			bottom: 0vw;
			background: #fff;
			color: #000;
			padding: 3vw;
			padding-top: 2vw;
			box-sizing: border-box;
			border-radius: 2.5vw 2.5vw 0vw 0vw;
			transition: all 300ms;
			display: flex;
			flex-direction: column;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 2vw;
				.title {
					font-weight: 600;
					font-size: 36rpx;
					color: rgba(51, 51, 51, 1);
				}
				.right {
					width: max-content;
					height: max-content;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.btns-list {
				box-sizing: border-box;
				padding: 6vw 0vw;
				display: flex;
				justify-content: space-between;
				height: 100%;
				margin-bottom: 1vw;

				.item {
					width: 46%;
					padding: 2vw;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 2.5vw;
					background: rgba(237, 237, 237, 1);
					overflow: hidden;
					position: relative;
					&.ac {
						background: rgba(159, 224, 210, 1);
						border: 1px solid rgba(0, 153, 127, 1);
						.left {
							color: rgba(0, 153, 127, 1);
						}
						.right {
							color: rgba(0, 153, 127, 1);
							background: rgba(133, 214, 198, 1);
							border: 1px solid rgba(0, 153, 127, 1);
						}
						.dui {
							display: block;
						}
					}
					&:first-child {
						.right {
							--size-val: 10vw;
							width: var(--size-val);
							height: calc(var(--size-val) * 16 / 9);
						}
					}
					&:last-child {
						.right {
							--size-val: 15vw;
							width: var(--size-val);
							height: calc(var(--size-val) * 9 / 16);
						}
					}
					.left {
						margin-right: 2vw;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						.text {
							font-size: 5.2vw;
							margin-bottom: 1vw;
						}
						.resolution {
							font-size: 4.1vw;
						}
					}
					.right {
						font-size: 4.1vw;
						border-radius: 1vw;
						background: rgba(219, 219, 219, 1);
						border: 1px solid rgba(166, 166, 166, 1);
						color: rgba(153, 153, 153, 1);
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.dui {
						position: absolute;
						width: 10%;
						padding: 0vw 1vw;
						box-sizing: border-box;
						border-radius: 2.5vw 0vw 2.5vw 0vw;
						background: rgba(0, 153, 127, 1);
						bottom: 0vw;
						right: 0vw;
						display: none;
						.icon {
							width: 100%;
						}
					}
				}
			}
			.btn {
				margin-bottom: 4.6vw;
				border-radius: 2.5vw;
				background: rgba(0, 153, 127, 1);
				width: 100%;
				height: 30vw;
				opacity: 1;
				border-radius: 2.5vw;
				background: rgba(0, 153, 127, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.page3popup-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 5vw;
		overflow: auto;
		.text-box {
			margin-bottom: 5vw;

			.text1 {
				color: #fff;
				font-size: 4vw;
			}

			.text2 {
				margin-top: 2vw;
				font-size: 3vw;
				color: #7c7c7c;
			}
		}
		.cont-list {
			.cont-item {
			}
		}
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}

		.popup-title {
			padding-top: 5vw;
			color: #fff;
			text-align: center;
		}
		.popup-main {
			height: 68vh;
			overflow: auto;
			box-sizing: border-box;
			padding: 2vw;
			.cont-list {
				.item {
					background: rgba(126, 126, 126, 0.186);
					box-sizing: border-box;
					padding: 5vw;
					border-radius: 2.5vw;
					width: 100%;
					margin-bottom: 3vw;
					color: #fff;
					font-size: 3.68vw;
					font-weight: 100;
					text-indent: 2em;

					&.ac {
						border: 1vw solid #98c379;
					}
				}
			}
			.opt-list {
				.item {
					width: 100%;
					margin-bottom: 6vw;
					.title {
						color: #fff;
						font-size: 3.68vw;
						font-weight: 100;
					}
					.slider {
					}
				}
			}
		}
		.people-subBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
			width: 90%;
			height: 15vw;
			margin: 5.2vw auto;
			border-radius: 2.5vw;
			color: #000;
			font-weight: bold;
		}

		.audio-list {
			// flex: 1;
			overflow: auto;
			display: -webkit-box;

			.audio-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0vw 1vw;
				height: max-content;
				border-radius: 1.5vw;

				&.ac {
					border: 1px solid #00deb9;
				}

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 100%;

					.pic-box {
						width: 20vw;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.audio-pic {
							width: 15vw;
							height: 15vw;
							display: block;
							border-radius: 50%;
						}

						.playStatusIcon {
							position: absolute;
							left: 0vw;
							top: 0vw;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon {
								width: 8.6vw;
								height: 8.6vw;
								display: block;
							}
						}
					}

					.date-time {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}

				.right {
					display: none;
					justify-content: center;
					align-items: center;
					height: 100%;

					.time {
					}

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
						padding: 0vw 3vw;
					}

					.useBtn {
						background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 100vw;
						padding: 1vw 2vw;

						.useBtn-text {
							font-size: 3.5vw;
							color: #111;
						}
					}
				}
			}
		}
	}

	.dialog-newUser {
		z-index: 999;
		position: fixed;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 520;
		background: rgba(0, 0, 0, 0.52);
		.dialog-newUser-content {
			position: relative;
			display: flex;
			justify-content: center;
			// width: 733px;
			// height: 590px;
			width: 86vw;
			animation: show-in 200ms linear;
			img.dialog-newUser-bgi {
				width: 100%;
				height: 100%;
				position: relative;
			}
			.pic-text {
				width: 52%;
				position: absolute;
				top: 56%;
			}
			.btn {
				position: absolute;
				bottom: 12%;
				width: 30%;
				height: 10%;
				opacity: 1;
				background: linear-gradient(180deg, #fffef7 0%, #a4f5d2 99.49%);
				border: 2px solid #ffffff;
				box-shadow: 0px 10px 38px #fff;
				border-radius: 100vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 2.6vw;
				font-weight: 400;
				letter-spacing: 0px;
				color: #0e4032;
				text-align: left;
				vertical-align: top;
				cursor: pointer;
				&:hover {
					background: linear-gradient(180deg, rgba(164, 245, 210, 1) 0%, rgba(255, 254, 247, 1) 99.49%);
				}
				&.style2 {
					background: linear-gradient(180deg, rgba(255, 254, 247, 1) 0%, rgba(255, 158, 102, 1) 99.49%);
					border: 2px solid rgba(255, 255, 255, 1);
					box-shadow: 0px 10px 38px #fff;
					&:hover {
						background: linear-gradient(180deg, rgba(255, 158, 102, 1) 0%, rgba(255, 254, 247, 1) 99.49%);
					}
				}
			}
			@keyframes show-in {
				0% {
					width: 0px;
					height: 0px;
				}
				100% {
					width: 733px;
					height: 590px;
				}
			}
		}
	}

	.contact-box {
		position: absolute;
		z-index: 10;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		overflow: hidden;
		background: linear-gradient(313deg, #06d4b8 0%, #a1f071 99.72%);

		.contact {
			color: #000;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.png {
				width: 68%;
				height: 68%;
				display: block;
			}
		}
	}
}
</style>
